/* ═══════════════════════════════════════════════════════════════════════════
   LAS PÁGINAS PÚBLICAS EN K2 · lo que la portada no tiene
   (app/templates/_publica_base.html y las páginas que lo extienden; la
   primera, /registro-prueba, 13-oct-2026)

   Va DESPUÉS de k2_tokens.css, k2_base.css y landing.css: el marco (la barra,
   el pie, el papel, el vidrio, la píldora, el titular en dos tintas, los pasos
   numerados) es el de la portada, y aquí solo está lo nuevo. Por eso esta hoja
   no repite nada de esas tres. Sus clases empiezan por p-.

   Reglas que la guardan (tests/test_publica_k2.py y test_k2_base_jinja.py):
   ningún color literal (todo sale de var(--…) de k2_tokens.css); nada apagado
   con opacity; sin :has() y sin backdrop-filter (el vidrio de la portada ya es
   opaco); el arte es el MISMO archivo, con la misma huella, que pide
   landing.css, así la caché sirve a las dos páginas; y `black` en una máscara
   vale solo por su alfa: no pinta.

   §1 el arte     §2 la composición     §3 lo que incluye
   §4 el formulario     §5 las confirmaciones     §6 con el dedo
   §7 la barra sin su tinta     §8 lo que acompaña el acceso
   §9 el documento     §10 un artículo o un fallo     §11 la dirección del
   conector     §12 los planes     §13 la autorización de una conexión

   Desde el 13-oct-2026 el kit lo usan también /login, /recuperar, /reset,
   /contacto, /planes, los textos legales y /conector, /mcp, la autorización
   de una conexión, las páginas de error, /ley y /fallo; y después la cuenta
   (/account/mcp, /account/conexion), /word/instalar y el aviso genérico
   (error_aviso.html). Cada plantilla dice en su cabecera qué secciones toma.
   Lo que solo una página usa va en su propia hoja, en esta misma carpeta y
   con las mismas guardas (cuenta.css, word_instalar.css); el botón de copiar
   de §11 es publica/copiar.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ §1 · El arte ════════════════════════════════════════════════════════════
   Las líneas de flujo de la portada, la misma pieza que allá a cada ancho: en
   el teléfono la alta y en la tableta la media, tranquilas arriba y
   apagándose hacia abajo; desde 961 px, el campo de la Biblioteca a la
   derecha, que pasa bajo el panel (opaco) y deja el texto de la izquierda
   sobre el papel. Va con .arte (landing.css: detrás del contenido, dentro de
   su sección) y .arte-lista puesto en el HTML: está en la primera pantalla y
   landing.js §12 no lo difiere. */
.p-arte::before { background-size: 100% auto; background-position: 50% 0; }
@media (max-width: 960px) {
  .p-arte {
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 560px);
            mask-image: linear-gradient(to bottom, black, transparent 560px);
  }
}
@media (min-width: 961px) {
  .p-arte {
    -webkit-mask-image: linear-gradient(to right, transparent 40%, black 76%);
            mask-image: linear-gradient(to right, transparent 40%, black 76%);
  }
  .p-arte::before { background-size: cover; background-position: 50% 30%; }
}

@media (max-width: 760px) {
  .p-arte::before { background-image: url("../landing/arte/portada-alta.claro.svg?v=75b9253f"); }
  :root[data-theme="dark"] .p-arte::before { background-image: url("../landing/arte/portada-alta.oscuro.svg?v=a671d85f"); }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .p-arte::before { background-image: url("../landing/arte/portada-alta.oscuro.svg?v=a671d85f"); } }
@media (min-width: 761px) and (max-width: 960px) {
  .p-arte::before { background-image: url("../landing/arte/portada-media.claro.svg?v=14fb95bc"); }
  :root[data-theme="dark"] .p-arte::before { background-image: url("../landing/arte/portada-media.oscuro.svg?v=3f136842"); }
}
@media (min-width: 761px) and (max-width: 960px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .p-arte::before { background-image: url("../landing/arte/portada-media.oscuro.svg?v=3f136842"); } }
@media (min-width: 961px) {
  .p-arte::before { background-image: url("../landing/arte/escena-biblioteca.claro.svg?v=51403fd8"); }
  :root[data-theme="dark"] .p-arte::before { background-image: url("../landing/arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); }
}
@media (min-width: 961px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .p-arte::before { background-image: url("../landing/arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); } }

/* ═══ §2 · La composición: cabecera, panel y lo que acompaña ═════════════════
   En el teléfono y la tableta, una columna: la cabecera, el panel (lo que se
   viene a hacer) y después lo que acompaña. Desde 961 px, la cabecera y lo que
   acompaña a la izquierda y el panel a la derecha, a su ancho. El orden del
   documento es el mismo en los dos casos (y el de un lector de pantalla). Sin
   filete arriba: debajo de la barra ya hay uno. */
.p-acceso {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cab" "panel" "lado";
  align-items: start; row-gap: 24px;
  padding: clamp(24px, 3vw + 12px, 72px) var(--m-pad) var(--m-seccion);
}
.p-acceso-cab {
  grid-area: cab; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  max-width: 600px; min-width: 0;
}
/* Las dos frases del titular, cada una en su renglón: con la segunda en línea,
   «Revisa tu correo. Ahí / se activa tu cuenta.» partía la frase gris. */
.p-acceso-cab .m-h2-doble span { display: block; }
.p-acceso-cab .k2-entradilla { max-width: 34em; }
/* Un correo largo no desborda a 390 px: se corta después de la arroba (el
   <wbr> de la plantilla) y, solo si aun así no cabe, dentro de la palabra. */
.p-acceso-cab strong { font-weight: 500; color: var(--text); overflow-wrap: break-word; }
.p-acceso-panel {
  grid-area: panel; width: 100%; min-width: 0;
  max-width: calc(440px + 2 * var(--m-vidrio-pad));
}
.p-acceso-lado { grid-area: lado; max-width: 600px; min-width: 0; }
@media (min-width: 761px) and (max-width: 960px) {
  .p-acceso-panel { max-width: calc(480px + 2 * var(--m-vidrio-pad)); }
}
@media (min-width: 961px) {
  .p-acceso {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(440px + 2 * var(--m-vidrio-pad)));
    grid-template-areas: "cab panel" "lado panel";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 96px); row-gap: 40px;
    /* Una confirmación corta no sube el pie a media pantalla. */
    min-height: calc(100svh - var(--m-alto-barra));
  }
  /* La píldora a la altura del título del panel. */
  .p-acceso-cab { padding-top: calc(var(--m-vidrio-pad) + 2px); }
}
.p-acceso-nota { margin-top: 16px; max-width: 46ch; }
.p-acceso-cab .p-acceso-nota { margin-top: 6px; }

/* ═══ §3 · Lo que incluye ═══════════════════════════════════════════════════ */
.p-incluye { margin-top: 12px; border-top: 0.8px solid var(--border); }
.p-incluye li {
  padding: 12px 0; border-bottom: 0.8px solid var(--border);
  font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty;
}
.p-incluye strong { font-weight: 500; color: var(--text); }

/* ═══ §4 · El formulario ═════════════════════════════════════════════════════
   Los campos son los del kit (k2_base.css: .k2-campo, .k2-etiqueta, .k2-ayuda,
   .k2-casilla, .k2-aviso). Aquí, el ritmo y lo que es solo de esta página. */
.p-form { display: flex; flex-direction: column; gap: 16px; }
/* «Opcional»: lo que ayuda, separado de lo que se pide por un filete
   punteado arriba y abajo (la casilla y el botón vuelven a ser lo pedido). */
.p-form-grupo {
  display: flex; flex-direction: column; gap: 16px;
  padding: 14px 0 18px; border-block: 0.8px dashed var(--border);
}
.p-form-grupo > .k2-rotulo { margin-bottom: -4px; }
.p-form-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 961px) {
  .p-form-par { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.p-enviar { width: 100%; margin-top: 4px; }
/* El campo trampa (H40.2, app/services/antibot_form.py): oculto por POSICIÓN,
   no por display:none ni visibility:hidden, que un bot sabe saltarse. Sigue en
   el árbol de accesibilidad con su etiqueta («Deja este campo vacío»), y
   fuera del orden de tabulación (tabindex="-1"). */
.p-trampa {
  position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ═══ §5 · Las confirmaciones ════════════════════════════════════════════════
   «Revisa tu correo»: lo que sigue, en pasos numerados con el número de la
   portada (.r-paso-n, .r-paso-tit, en landing.css). */
.p-pasos { display: flex; flex-direction: column; }
.p-paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.p-paso:first-child { padding-top: 2px; }
.p-paso:last-child { padding-bottom: 2px; }
.p-paso + .p-paso { border-top: 0.8px dashed var(--border); }
.p-paso .r-paso-tit { padding-top: 3px; }
.p-paso-texto { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* ═══ §6 · Con el dedo: los enlaces dentro de un texto alcanzan 44 px ════════
   Con un ::after transparente, como la portada: el renglón no se mueve y el
   anillo de foco sigue ceñido a la palabra. */
@media (pointer: coarse) {
  .p-acceso-nota a, .p-form .k2-casilla a { position: relative; white-space: nowrap; }
  .p-acceso-nota a::after, .p-form .k2-casilla a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* Lo mismo en las demás páginas (desde el 13-oct-2026): las notas, las migas
   y los enlaces de cada ficha. Los chips y los artículos de /ley crecen de
   verdad: van en filas y un área prestada pisaría la vecina. El texto legal
   no: un enlace dentro de un párrafo es la excepción de WCAG 2.5.8, y crecerlo
   taparía el renglón de arriba y el de abajo. */
@media (pointer: coarse) {
  .p-nota a, .p-migas a, .p-ficha-enlaces a, .p-aviso-ok a { position: relative; }
  .p-nota a::after, .p-migas a::after, .p-ficha-enlaces a::after, .p-aviso-ok a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .p-chips a { min-height: 44px; }
  .p-articulos > li { padding: 0; }
  .p-articulos a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ═══ §7 · La barra sin su tinta ═════════════════════════════════════════════
   En la portada, bajo 520 px, «Iniciar sesión» cede su lugar a la tinta
   «Agendar» (landing.css). Aquí la tinta se apaga (`barra_tinta`) y el hueco
   quedaba vacío: quien ya tiene cuenta tenía que bajar más allá del
   formulario para entrar. Vuelve, con sus 44 px para el dedo. */
@media (max-width: 519px) {
  .p-barra-sin-tinta .m-barra-ingreso { display: inline-flex; }
}
@media (max-width: 519px) and (pointer: coarse) {
  .p-barra-sin-tinta .m-barra-ingreso::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ═══ §8 · Lo que acompaña el acceso ════════════════════════════════════════
   /login, /recuperar y /reset: el aviso que confirma (el texto en
   --green-text, que es el que llega a 4,5:1; --green es relleno), el campo
   de varias líneas de /contacto y, bajo la cabecera, el Informe
   Semanal vigente (_publica_informe.html): a quien vuelve no hay que venderle
   el producto, hay que darle algo que leer. */
.p-aviso-ok {
  padding: 10px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.45;
  background: var(--green-bg); border: 0.8px solid var(--green-border); color: var(--green-text);
}
.p-aviso-ok p + p, .p-aviso-ok p + ul, .p-aviso-ok ul + p { margin-top: 6px; }
.p-aviso-ok ul { margin: 0; padding-left: 18px; }
/* El campo de varias líneas (el mensaje de /contacto): el canto, el foco y la
   letra de .k2-campo, a su alto. */
textarea.k2-campo { height: auto; min-height: 132px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.p-informe { display: flex; flex-direction: column; gap: 12px; }
.p-informe-tarjeta { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.p-informe-tarjeta .k2-h3 { text-wrap: balance; }
.p-informe-meta { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
a.p-informe-tarjeta:hover .k2-enlace { color: var(--text); text-decoration-color: var(--text-3); }
a.p-informe-tarjeta:hover .k2-enlace svg { transform: translateX(2px); }
/* Las acciones de la cabecera, en fila, cuando la página no tiene panel que
   las lleve: las páginas de error y /planes. La primera es la tinta. */
.p-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 8px; }
/* Una acción que el guion enciende solo si sirve («Volver», con historial):
   el display del botón le ganaría al [hidden] del navegador. */
.p-acciones > [hidden] { display: none; }

/* ═══ §9 · El documento ══════════════════════════════════════════════════════
   Los textos que se leen enteros: privacidad, términos, soporte, la guía del
   conector (/conector) y las páginas de /ley y /fallo. Una columna de lectura
   sobre el papel, sin arte detrás: el arte compite con un texto largo. El
   texto legal llega como HTML desde docs/legal/*.md (`_render_legal`): aquí
   se le da forma, nunca se toca lo que dice. */
.p-doc { padding: clamp(24px, 3vw + 12px, 72px) var(--m-pad) var(--m-seccion); }
.p-doc-cab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  max-width: 760px; min-width: 0; margin-bottom: clamp(28px, 2vw + 16px, 48px);
}
.p-doc-cab .k2-entradilla { max-width: 40em; }
.p-doc-cuerpo { max-width: 760px; min-width: 0; }
.p-doc-cuerpo > section + section {
  margin-top: clamp(32px, 2vw + 20px, 48px); padding-top: clamp(28px, 1.5vw + 18px, 40px);
  border-top: 0.8px solid var(--border);
}
.p-doc-cuerpo > section > .k2-h3 { margin-bottom: 14px; }
.p-migas { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.p-migas a { text-decoration: underline; text-decoration-color: var(--deco); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.p-migas a:hover { color: var(--text); text-decoration-color: var(--text-3); }
.p-titulo-enlace { text-decoration: underline; text-decoration-color: var(--deco); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.p-titulo-enlace:hover { text-decoration-color: var(--text-3); }
.p-nota { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.p-nota a { text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }

/* La prosa del texto legal: el h1 del documento es el titular de la página. */
.p-prosa { font-size: 15px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.p-prosa > * + * { margin-top: 1em; }
.p-prosa h1 {
  font-size: clamp(28px, 1.53vw + 22px, 44px); font-weight: 500; line-height: 1.12; letter-spacing: -0.022em;
  color: var(--text); text-wrap: balance;
}
.p-prosa h1 + * { margin-top: 20px; }
/* La píldora («Legal», «Ayuda») va arriba del titular del documento. */
.p-prosa > .m-pildora + h1 { margin-top: 18px; }
.p-prosa h2 {
  margin-top: 2.4em; padding-top: 1.4em; border-top: 0.8px solid var(--border);
  font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--text);
}
.p-prosa h3 { margin-top: 1.8em; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
.p-prosa h2 + *, .p-prosa h3 + * { margin-top: 0.6em; }
.p-prosa strong { font-weight: 600; color: var(--text); }
.p-prosa ul, .p-prosa ol { padding-left: 1.3em; }
.p-prosa li + li { margin-top: 0.4em; }
.p-prosa li > ul, .p-prosa li > ol { margin-top: 0.4em; }
.p-prosa a {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--deco);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.p-prosa a:hover { text-decoration-color: var(--text-3); }
.p-prosa blockquote {
  margin-inline: 0; padding: 10px 16px; border-left: 2px solid var(--border-strong);
  background: var(--bg-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.p-prosa code {
  font-family: var(--mono); font-size: 0.88em; padding: 1px 5px; border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--text); overflow-wrap: anywhere; font-variation-settings: normal;
}
.p-prosa pre { overflow-x: auto; padding: 10px 14px; border-radius: var(--radius); background: var(--bg-2); }
.p-prosa pre code { padding: 0; background: none; overflow-wrap: normal; }
.p-prosa hr { height: 0; margin: 2.4em 0 0; border: 0; border-top: 0.8px solid var(--border); }
/* Los textos separan sus capítulos con «---» y además con «##»: un solo
   filete, el de la regla, y el capítulo empieza bajo él. */
.p-prosa hr + h2 { margin-top: 1.4em; padding-top: 0; border-top: 0; }
/* Una tabla ancha se desplaza dentro de sí misma, no la página (390 px). */
.p-prosa table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse;
  font-size: 14px; line-height: 1.5;
}
.p-prosa th, .p-prosa td { padding: 9px 12px; border: 0.8px solid var(--border); text-align: left; vertical-align: top; }
.p-prosa th { background: var(--tabla-cab); font-weight: 500; color: var(--text); }

/* ═══ §10 · Un artículo de ley o un fallo ════════════════════════════════════
   /ley, /ley/{código}, el artículo y la ficha de un fallo. La cita textual va
   con una línea a la izquierda (un estado se marca con fondo o con línea,
   nunca con tinta) y su fuente debajo. */
.p-texto-ley {
  padding: 4px 0 4px 16px; border-left: 2px solid var(--border-strong);
  font-size: 15px; line-height: 1.65; color: var(--text); white-space: pre-line;
}
/* Justificados (José, 25-oct-2026): el texto del artículo, lo que resolvió cada fallo
   y lo que se cita de él. Con guiones, para que la justificación no abra ríos. */
.p-texto-ley, .p-ficha-doctrina, .p-cita p, .p-doc-cuerpo .k2-cuerpo { text-align: justify; hyphens: auto; }
/* El artículo en párrafos (José, 2-nov-2026): cada inciso y cada numeral en su renglón,
   sin la línea en blanco que dejaría `pre-line`, y con una sangría leve, como en el
   código impreso. */
.p-texto-ley--parrafos { white-space: normal; }
.p-texto-ley--parrafos p { margin: 0; }
.p-texto-ley--parrafos p + p { margin-top: 4px; text-indent: 1em; }

/* El arte detrás de toda la página (José, 25-oct-2026: «ese fondo blanco, con las líneas
   de arte abstracto, a toda la página, resguardando el contenido con recuadros grises
   sutiles»). Las líneas de la portada, a cada ancho la misma pieza que allá, quietas
   respecto de la ventana mientras se baja (`fixed`; donde el navegador no lo hace, se
   desplazan con la página). Sin `.arte`: su `contain: strict` no deja fijar el fondo.
   El texto va siempre sobre un recuadro opaco: el arte nunca queda detrás de una letra. */
.p-doc--arte { position: relative; isolation: isolate; }
.p-doc-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.p-doc-fondo::before {
  content: ""; position: absolute; inset: 0;
  background: no-repeat 50% 0 / cover fixed;
  background-image: url("../landing/arte/portada-alta.claro.svg?v=75b9253f");
}
:root[data-theme="dark"] .p-doc-fondo::before { background-image: url("../landing/arte/portada-alta.oscuro.svg?v=a671d85f"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .p-doc-fondo::before { background-image: url("../landing/arte/portada-alta.oscuro.svg?v=a671d85f"); } }
@media (min-width: 761px) {
  .p-doc-fondo::before { background-image: url("../landing/arte/portada-media.claro.svg?v=14fb95bc"); }
  :root[data-theme="dark"] .p-doc-fondo::before { background-image: url("../landing/arte/portada-media.oscuro.svg?v=3f136842"); }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .p-doc-fondo::before { background-image: url("../landing/arte/portada-media.oscuro.svg?v=3f136842"); } }
@media (min-width: 1101px) {
  .p-doc-fondo::before { background-image: url("../landing/arte/portada-b.claro.svg?v=5faf8b93"); }
  :root[data-theme="dark"] .p-doc-fondo::before { background-image: url("../landing/arte/portada-b.oscuro.svg?v=f09c4ccf"); }
}
@media (min-width: 1101px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .p-doc-fondo::before { background-image: url("../landing/arte/portada-b.oscuro.svg?v=f09c4ccf"); } }
.p-doc--arte .p-doc-cab,
.p-doc--arte .p-doc-cuerpo > section:not(.p-sin-recuadro) {
  padding: clamp(20px, 1.5vw + 14px, 32px); background: var(--bg-1);
  border: 0.8px solid var(--border); border-radius: var(--radius-lg);
}
.p-doc--arte .p-doc-cab { margin-bottom: 12px; }
/* Más compacto arriba (José, 25-oct): que «Sentencias destacadas» asome sin bajar. */
.p-doc--arte { padding-top: clamp(16px, 1vw + 10px, 28px); }
.p-doc--arte .p-doc-cab { padding-top: clamp(18px, 1vw + 12px, 26px); padding-bottom: clamp(18px, 1vw + 12px, 24px); }
.p-doc--arte .p-doc-cab .p-migas { margin-bottom: 8px; }
.p-doc--arte .p-doc-cab .p-vecinos { margin-top: 12px; }
.p-doc--arte .p-doc-cuerpo > section + section,
.p-doc--arte .p-doc-cuerpo > .p-folium + section,
.p-doc--arte .p-doc-cuerpo > .p-folium { margin-top: 12px; }
.p-doc--arte .p-doc-cuerpo > section:not(.p-sin-recuadro) + section:not(.p-sin-recuadro),
.p-doc--arte .p-doc-cuerpo > .p-folium + section { padding-top: clamp(20px, 1.5vw + 14px, 32px); border-top: 0.8px solid var(--border); }
.p-doc--arte .p-doc-cuerpo > .p-sin-recuadro { padding-top: 0; border-top: 0; }
.p-doc--arte .p-folium { border-radius: var(--radius-lg); }

/* La fuente y las fechas del texto, más chicas que el artículo (José, 25-oct: el foco es el
   texto). --text-3 y no opacidad (DISENO §5). */
.p-fuente { font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.p-actualizado { margin: -8px 0 6px; font-size: 13px; color: var(--text-3); }

/* Los artículos vecinos (_ley_vecinos.html): hojear el código sin volver al índice.
   El actual se marca con fondo, no con tinta; un «…» marca los que no tienen página. */
.p-vecinos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px;
  font-size: 14px; font-variant-numeric: tabular-nums; }
.p-vecinos-fila { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.p-vecinos-fila a, .p-vecinos-fila span { display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 32px; padding: 0 8px; border-radius: var(--radius); color: var(--text-2);
  text-decoration: none; }
.p-vecinos-fila a:hover { background: var(--bg-2); color: var(--text); }
.p-vecinos-fila [aria-current="page"] { background: var(--bg-2); color: var(--text); font-weight: 500; }
.p-vecinos-salto { padding: 0 2px; color: var(--text-3); }
.p-vecinos-paso { color: var(--text); text-decoration: underline; text-decoration-color: var(--deco);
  text-underline-offset: 3px; white-space: nowrap; }
.p-vecinos-paso:hover { text-decoration-color: var(--text-3); }
/* En el teléfono: la fila arriba, y el anterior y el siguiente juntos debajo. */
@media (max-width: 560px) {
  .p-vecinos { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "fila fila" "ant sig"; }
  .p-vecinos-fila { grid-area: fila; }
  .p-vecinos-ant { grid-area: ant; }
  .p-vecinos-sig { grid-area: sig; justify-self: end; }
  .p-vecinos .p-lejos { display: none; }
}

/* Folium por dentro, al lado del artículo (_ley_folium.html). Desde 1101 px el cuerpo
   se abre en dos columnas: el artículo y los fallos a la izquierda, esto a la derecha
   y fijo mientras se lee. Más angosto va en el flujo, entre el artículo y los fallos.
   El arte (el campo de la Biblioteca de la portada) solo en la franja de arriba y
   apagándose: el texto queda sobre el papel. Sin tinta: la acción pintada es la
   invitación de abajo. */
.p-folium {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 22px 22px 20px; border: 0.8px solid var(--border); border-radius: var(--radius); background: var(--bg-1);
}
.p-folium-arte { bottom: auto; height: 210px;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent);
          mask-image: linear-gradient(to bottom, black 30%, transparent); }
.p-folium-arte::before { background-size: cover; background-position: 50% 30%;
  background-image: url("../landing/arte/escena-biblioteca.claro.svg?v=51403fd8"); }
:root[data-theme="dark"] .p-folium-arte::before { background-image: url("../landing/arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .p-folium-arte::before { background-image: url("../landing/arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); } }
/* La hoja, al centro de la franja del arte, al tamaño en que la pluma se lee (a 76 px los
   trazos de la portada quedaban bajo el medio píxel). */
.p-folium .p-folium-hoja { width: 132px; align-self: center; margin: 0 0 4px; }
.p-folium-tit { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--text); }
/* El título y «Ver planes» en la misma fila (José, 3-nov-2026): el botón es la tinta de
   la página. Si no caben, el botón baja entero, sin partirse. */
.p-folium-cab { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 12px; }
.p-folium-cab .p-folium-tit { flex: 1 1 8em; min-width: 0; }
.p-folium-cab .k2-boton-tinta { flex: none; }
.p-folium-intro { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
/* El ejemplo, como se escribiría en el buscador: con línea y no con tinta. */
.p-folium-ejemplo { margin: -4px 0 0; padding: 8px 12px; border-left: 2px solid var(--border-strong);
  font-size: 14px; font-style: italic; line-height: 1.5; color: var(--text-2); }
.p-folium-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
/* Sin justificar: en una columna de 340 px la justificación abre huecos y parte palabras. */
.p-folium-lista li { text-wrap: pretty; }
.p-folium-lista b { font-weight: 500; color: var(--text); }
.p-folium-nota { margin: -4px 0 0; font-size: 13px; color: var(--text-2); }
/* En el flujo, la misma separación que entre dos secciones. */
.p-doc-cuerpo > .p-folium { margin-top: clamp(32px, 2vw + 20px, 48px); }
.p-doc-cuerpo > .p-folium + section {
  margin-top: clamp(32px, 2vw + 20px, 48px); padding-top: clamp(28px, 1.5vw + 18px, 40px);
  border-top: 0.8px solid var(--border);
}
@media (min-width: 1101px) {
  .p-doc--con-lado { display: grid; grid-template-columns: minmax(0, 760px) 340px; column-gap: 56px; align-items: start; }
  .p-doc--con-lado .p-doc-cuerpo { display: contents; }
  .p-doc--con-lado > *, .p-doc--con-lado .p-doc-cuerpo > * { grid-column: 1; }
  .p-doc--con-lado .p-doc-cuerpo > .p-folium {
    grid-column: 2; grid-row: 1 / span 12; align-self: start;
    /* lado.js baja el `top` cuando el recuadro no cabe en la ventana: así se ve su final. */
    --lado-arriba: 96px;
    position: sticky; top: var(--lado-arriba); margin-top: 0;
  }
}
/* Qué es Folium, entre el artículo y los fallos (spec 027): sin tinta, sobre el fondo 1. */
.p-presenta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px;
  border: 0.8px solid var(--border); border-radius: var(--radius); background: var(--bg-1); }
.p-presenta p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.p-presenta b { font-weight: 500; color: var(--text); }
.p-fichas > li { padding: 16px 0; border-top: 0.8px solid var(--border); }
.p-ficha-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.p-ficha-meta .k2-codigo { color: var(--text); line-height: inherit; }
.p-ficha-meta > * + *::before { content: "·"; margin-right: 8px; color: var(--text-3); }
/* El título del resumen (spec 027): de qué trata el caso, sobre la línea de lo resuelto. */
.p-ficha-titulo { margin: 8px 0 0; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); text-wrap: pretty; }
.p-ficha-titulo + .p-ficha-doctrina { margin-top: 4px; }
.p-ficha-doctrina { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.p-ficha-enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  background: var(--pildora); box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-reposo);
  font-size: 13px; line-height: 1.35; color: var(--text);
  transition: box-shadow 150ms;
}
.p-chips a:hover { box-shadow: inset 0 0 0 0.8px var(--border-hover), var(--sombra-hover); }
.p-articulos { columns: 2; column-gap: 32px; }
.p-articulos > li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 0.8px dashed var(--border); break-inside: avoid;
}
.p-articulos a { color: var(--text); text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }
.p-articulos a:hover { text-decoration-color: var(--text-3); }
.p-articulos span { font-size: 13px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .p-articulos { columns: 1; } }
/* El índice de una ley (3-nov-2026): todos sus artículos, cada uno con el comienzo de
   su texto para encontrarlo sin saber el número. Una columna; el extracto en una línea. */
.p-articulos--ley { columns: 1; }
.p-articulos--ley > li {
  display: grid; grid-template-columns: 8em minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
}
.p-articulos--ley .p-articulo-extracto {
  font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: normal;
}
@media (max-width: 560px) {
  .p-articulos--ley > li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .p-articulos--ley .p-articulo-extracto { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}
.p-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: 15px; line-height: 1.5; }
.p-datos dt { color: var(--text-2); }
.p-datos dd { color: var(--text); }
.p-cita {
  margin: 0; padding: 12px 16px; border-left: 2px solid var(--border-strong);
  background: var(--bg-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px; line-height: 1.6; color: var(--text);
}
.p-cita + .p-cita { margin-top: 14px; }
.p-cita cite { display: block; margin-top: 6px; font-size: 13px; font-style: normal; color: var(--text-2); }
/* «Lo que dice la Corte sobre el art. N» dentro de una ficha de /ley (25-oct): la cita
   de .p-cita con su rótulo y el botón de copiar (§11). Sin tinta: es una cita, no la acción. */
.p-corte { margin: 12px 0 0; padding: 12px 16px; border-left: 2px solid var(--border-strong);
  background: var(--bg-2); border-radius: 0 var(--radius) var(--radius) 0; }
.p-corte figcaption { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.p-corte blockquote { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); text-align: justify; hyphens: auto; text-wrap: pretty; }
.p-corte-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
/* La invitación al final: el doble marco de la portada, con su única tinta. */
.p-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.p-cta > p { flex: 1 1 280px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
/* En el teléfono, un botón largo («Avísame de nuevos pronunciamientos sobre…») se
   parte en dos líneas en vez de cortarse; los cortos quedan igual (44 px). */
@media (max-width: 560px) {
  .p-cta .k2-boton-tinta { width: 100%; height: auto; min-height: 44px; padding-block: 10px;
                           white-space: normal; line-height: 1.3; text-align: center; }
}

/* ═══ §11 · La dirección del conector (/mcp y /mcp/claude) ═══════════════════
   La dirección es el objeto de la página: está para copiarla. Lleva su botón
   porque esto se abre casi siempre en el teléfono, donde seleccionar una
   dirección a dedo es un suplicio. Copiada, el botón lo dice con palabras
   (aria-live) y un fondo: sin tinta y sin marca de visto. */
.p-direccion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--sup-campo); border: 0.8px solid var(--border-campo); box-shadow: var(--sombra-campo);
}
.p-direccion code {
  flex: 1 1 200px; min-width: 0; font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--text); overflow-wrap: anywhere; font-variation-settings: normal;
}
.p-copiar[data-copiada] { background: var(--bg-active); color: var(--text); }
/* Los dos botones de una cita (30-oct-2026): «Copiar cita» y «Copiar con enlace». */
.p-copiar-par { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; }
.p-cita .p-copiar-par { margin-top: 8px; }
/* Con la clase: el reset de k2_base.css (ol[class]) pesa más que una clase sola. */
ol.p-conector-pasos { margin-top: 18px; font-size: 14px; }
.p-conector-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }

/* ═══ §12 · Los planes ═══════════════════════════════════════════════════════
   /planes en preparación (lo que se sirve, PLANES_VISIBLES = False) y la
   página de planes apagada. Las cifras son las de la portada, con su fecha
   (`landing_contexto.cifras_portada`); el plan que se recomienda lleva la
   única tinta, no un canto de color. */
.p-cifras { display: grid; grid-template-columns: minmax(0, 1fr); }
.p-cifras > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.p-cifras > div + div { border-top: 0.8px solid var(--border); }
.p-cifras dt {
  font-size: clamp(26px, 0.57vw + 23.8px, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.p-cifras dt small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.p-cifras dd { font-size: 13px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.p-cuenta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.p-cuenta .p-incluye { margin-top: 8px; }
.p-producto { padding: var(--m-seccion) var(--m-pad); border-top: 0.8px solid var(--border); }
.p-producto .m-sec-cab { margin-bottom: clamp(24px, 2vw + 12px, 40px); }
.p-rejilla { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 561px) { .p-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 961px) { .p-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-rejilla .k2-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.p-rejilla .k2-tarjeta p { font-size: 14px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.p-rejilla .k2-tarjeta h3 { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); }
.p-planes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; margin-bottom: 24px; }
.p-plan { display: flex; flex-direction: column; gap: 12px; }
.p-plan-precio { font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; color: var(--text); font-variant-numeric: tabular-nums; }
.p-plan-precio small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.p-plan .p-incluye { margin-top: 4px; flex: 1; }
.p-plan .p-incluye li { font-size: 14px; padding: 9px 0; }
.p-plan > .k2-boton, .p-plan > .k2-boton-tinta { width: 100%; }

/* ═══ §13 · La autorización de una conexión (/oauth/authorize) ═══════════════
   Los dos datos duros de la pantalla, con el mismo peso: la cuenta y adónde
   llega el acceso. El destino va en ámbar cuando no lo reconocemos, que es
   justo cuando conviene que el ojo se detenga antes de autorizar (el texto en
   --amber-text; --amber es relleno). */
.p-conexion { display: flex; flex-direction: column; gap: 8px; }
.p-dato {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 12px 14px; border-radius: var(--radius); background: var(--bg-2); border: 0.8px solid var(--border);
  font-size: 14px; line-height: 1.45; color: var(--text);
}
.p-dato dt { flex: 1 0 100%; }
.p-dato dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.p-dato strong { font-weight: 500; overflow-wrap: anywhere; }
.p-dato .k2-codigo { white-space: normal; overflow-wrap: anywhere; }
.p-dato--alerta { background: var(--amber-bg); border-color: var(--amber-border); }
.p-dato-marca { font-size: 12px; font-weight: 500; color: var(--amber-text); }
.p-permisos-tit { margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--text); }
.k2-tarjeta .p-permisos { margin-top: 6px; }
.p-permisos li { padding: 9px 0; font-size: 14px; }
.p-autorizar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
.p-autorizar .k2-boton-tinta { flex: 1 1 200px; }

/* ═══ Las páginas de producto (pagina_producto.html): las preguntas frecuentes ═ */
.p-pregunta { margin: 18px 0 6px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); }
.p-pregunta:first-of-type { margin-top: 0; }

/* ═══ §14 · El verificador de citas (verificador.html, spec 031) ═════════════
   Pintados: «Revisar la cita», y «Prueba gratis» y «Ver planes» en el azul de
   «Conversemos», por pedido de José (4-nov-2026). */
.vc-par { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vc-par { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.vc-datos { margin: 14px 0 10px; }
.vc-texto { position: relative; max-height: 70vh; overflow-y: auto; margin-top: 8px; padding: 16px; border: 0.8px solid var(--border);
  border-radius: var(--radius); background: var(--bg-1); color: var(--text); font-size: 15px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-texto:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vc-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vc-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: auto;
  min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: left; white-space: normal; }
.vc-opcion-fecha { font-weight: 500; }
.vc-opcion-det { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.vc-lado { margin-top: 12px; }
.vc-folium-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vc-folium-acciones .k2-boton-tinta { flex: 1 1 160px; justify-content: center; }
.vc-enlace { text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }
/* En pantalla ancha, Folium y el porqué van a la derecha; el formulario, el
   resultado y lo demás, a la izquierda (José, 4-nov-2026). */
@media (min-width: 1101px) {
  .vc-doc { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 420px); grid-template-rows: auto 1fr;
    column-gap: 12px; align-items: start; }
  .vc-doc > .p-doc-cab, .vc-doc > .vc-principal { grid-column: 1; }
  .vc-doc > .vc-lado { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .vc-lado .k2-cuerpo { text-align: left; hyphens: manual; }
}