/* ============================================================
   PLEASEPOINT 2026 — ARTÍCULO

   Dos cosas: la cabecera y la columna de lectura, que son
   nuestras, y LA CAPA DE PROSA, que no lo es.

   Los artículos están escritos con marcado de Bootstrap 4
   heredado de la web de 2020 y no se van a limpiar: cambiarles
   una línea del cuerpo está prohibido. Bootstrap tampoco se
   carga. Así que aquí se reimplementa, y SOLO DENTRO DE .prose,
   lo que los artículos usan de verdad —contado sobre los 134
   archivos, no supuesto—.

   Es el único archivo del sitio que estiliza marcado que no
   controlamos, y es donde hay que mirar cuando algo se vea raro
   dentro de un artículo.

   La tarjeta de los relacionados no está aquí: vive en
   agency.css, compartida con el listado.
   ============================================================ */

/* 68 caracteres, en un token: lo comparten la columna y la portada, que
   tienen que medir lo mismo o el artículo se lee torcido. */
:root{ --read:68ch; }

/* ------------------------------------------------------------
   LA COLUMNA, CENTRADA
   El artículo entero —migaja, titular, metadatos, portada y cuerpo— es
   una sola columna de 68 caracteres, y va centrada en la ventana.

   Antes arrancaba en el borde izquierdo de la rejilla del sitio, el del
   logotipo, y en una pantalla ancha dejaba media página vacía a la
   derecha: la página se veía descuadrada, no alineada.

   Las dos salidas eran ensancharla para que ocupara ese hueco o
   centrarla tal como está. Se centra: 68 caracteres es la medida a la
   que se lee un texto largo sin perder el renglón, y ensanchar la
   columna para justificar una alineación es pagar la lectura por una
   rejilla que en esta página no dibuja nada.

   Se centra la caja, no el texto: dentro, todo sigue arrancando en el
   mismo borde izquierdo —que es lo que evitaba centrar solo .prose y
   dejar la cabecera colgada a un lado—. El listado de relacionados y el
   cierre se quedan en la rejilla del sitio: son secciones de página, no
   parte del texto.
   ------------------------------------------------------------ */
.art-head > .wrap,
.art-body-sec > .wrap{ max-width:calc(var(--read) + var(--pad) * 2); }

/* ------------------------------------------------------------
   A1 · CABECERA DE ARTÍCULO
   ------------------------------------------------------------ */
.art-head{ padding-top:clamp(128px,14vh,180px); padding-bottom:0; }

/* La migaja, en mono y en una línea: Recursos y el bloque. El bloque
   entra al listado ya filtrado por él, que es la única salida útil desde
   un artículo que no era el que se buscaba. */
.art-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.art-crumb a{ color:var(--ink-3); }
.art-crumb a:hover{ color:var(--point-ink); }
.art-crumb-sep{ color:var(--line); }

/* display-m y no display-l: hay títulos de noventa caracteres y a tamaño
   de home ocupan la pantalla entera antes de empezar a leer.

   30ch y no 22: la medida de 22 la ponía la rejilla del sitio, donde el
   titular tenía toda la página para irse a lo ancho. Dentro de una
   columna de 68 caracteres ya no hace falta frenarlo tanto, y a 22 los
   títulos largos salían en cuatro líneas cortas con la columna medio
   vacía al lado. */
.art-h1{ margin-top:22px; max-width:30ch; }

/* Autor, fecha y bloque en una sola línea. Sin avatar, sin tiempo de
   lectura y sin botón de imprimir. */
.art-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px;
  margin:24px 0 0;
  font-size:.75rem; letter-spacing:.06em; color:var(--ink-3);
}
.art-meta-sep{ color:var(--line); }

/* La portada: A ANCHO DE LA COLUMNA DE LECTURA Y ENTERA, sin recortar.

   Es la única imagen del artículo que controla la plantilla, y muchas de
   ellas no son fotos: son esquemas, capturas y portadas con texto
   dentro. Recortarlas a una banda les cortaba justo lo que dicen, y a
   ancho de página una sola llenaba la pantalla antes de que empezara el
   texto. En la columna y completa se ve entera y el primer párrafo
   queda a la vista.

   La medida sale del mismo token que .prose: si una cambia, cambian las
   dos, que es lo único que evita que se separen. */
.art-hero{
  max-width:var(--read); margin:clamp(40px,5vw,64px) 0 0;
}
.art-hero img{
  display:block; width:100%; height:auto;
  background:var(--paper-sunk);
  border:1px solid var(--line);
}

/* ------------------------------------------------------------
   A2 · LA COLUMNA DE LECTURA
   68 caracteres, centrada. Solo las tablas, el código y los vídeos se
   salen, y lo hacen dentro de su propia caja: el body nunca scrollea en
   horizontal.
   ------------------------------------------------------------ */
.art-body-sec{ padding-top:clamp(48px,6vw,72px); padding-bottom:0; }

/* El texto, alineado a la izquierda de su columna: la migaja, el
   titular, los metadatos, la portada y el cuerpo arrancan todos en el
   mismo borde. Lo que se centra en la ventana es la columna entera, no
   cada pieza por su cuenta. */
.prose{
  max-width:var(--read); margin:0;
  font-size:1.0625rem; line-height:1.7; color:var(--ink);
}

/* ---------- Etiquetas ---------- */
.prose p{ margin:0 0 1.3em; }
.prose a{ color:var(--point-ink); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose strong,
.prose b{ font-weight:600; }
.prose em,
.prose i{ font-style:italic; }
.prose hr{ height:1px; background:var(--line); border:0; margin:2.5em 0; }

.prose h2,
.prose h3,
.prose h4,
.prose h5{
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  margin:1.8em 0 .5em; line-height:1.15;
}
.prose h2{ font-size:clamp(1.6rem,2.4vw,2.125rem); }
.prose h3{ font-size:clamp(1.35rem,1.9vw,1.625rem); }
.prose h4{ font-size:1.25rem; }
.prose h5{ font-size:1.0625rem; font-family:var(--font-sans); font-weight:600; letter-spacing:0; }

/* Cinco artículos abren un h1 dentro del cuerpo, y ya hay uno en la
   cabecera. Aquí se pinta con el tamaño de h2: el artículo no se puede
   reescribir, y dos h1 son un problema menor que romper esa regla. */
.prose h1{
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  margin:1.8em 0 .5em; line-height:1.15;
  font-size:clamp(1.6rem,2.4vw,2.125rem);
}

.prose ul,
.prose ol{ margin:0 0 1.3em; padding-left:1.5em; }
.prose li{ margin-bottom:.5em; }
.prose li > ul,
.prose li > ol{ margin:.5em 0 0; }

.prose blockquote{
  margin:1.6em 0; padding-left:clamp(20px,3vw,28px);
  border-left:2px solid var(--ink); color:var(--ink-2);
}

.prose figure{ margin:1.6em 0; }
.prose figcaption{ margin-top:10px; font-size:.875rem; color:var(--ink-3); }
.prose cite{ font-style:italic; }

/* ---------- Imágenes ---------- */
/* La regla que resuelve img-responsive, img-fluid y la clase 'img'
   suelta, que es lo que más aparece en todo el archivo. */
.prose img,
.prose .img,
.prose .img-responsive,
.prose .img-fluid{
  max-width:100%; height:auto; display:block;
}
.prose img{ margin:1.6em auto; border:1px solid var(--line); }

/* ---------- Vídeo ---------- */
/* Cuarenta y tantos, con controls ya en el marcado. Nada de autoplay. */
.prose video{
  display:block; width:100%; height:auto; margin:1.6em 0;
  background:var(--panel); border:1px solid var(--line);
}

/* ---------- Código ---------- */
.prose code{
  font-family:var(--font-mono); font-size:.875em;
  background:var(--paper-sunk); padding:.15em .4em; border-radius:4px;
}
.prose pre{
  margin:1.6em 0; padding:20px;
  background:var(--paper-sunk); border:1px solid var(--line); border-radius:8px;
  overflow-x:auto;
  font-family:var(--font-mono); font-size:.875rem; line-height:1.6;
}
/* Sin resaltado de sintaxis: no hay librería y no hace falta. */
.prose pre code{ background:none; padding:0; border-radius:0; font-size:inherit; }

/* ---------- Tablas ---------- */
.prose .table-responsive{ overflow-x:auto; margin:1.6em 0; }
.prose table{
  width:100%; border-collapse:collapse;
  font-size:.9375rem; line-height:1.45;
}
.prose th,
.prose td{
  padding:10px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.prose thead th{
  background:var(--paper-sunk); color:var(--ink); font-weight:600;
  border-bottom-color:var(--ink);
}
/* Las cifras en mono, alineadas por la coma, igual que en el resto del
   sitio. */
.prose td{ font-variant-numeric:tabular-nums; }
.prose .table-bordered th,
.prose .table-bordered td{ border:1px solid var(--line); }
.prose .table-striped tbody tr:nth-child(odd) td{ background:var(--paper-raised); }
.prose .table-primary,
.prose .table-primary > th,
.prose .table-primary > td{ background:var(--paper-sunk); }

/* ---------- Lo ancho ----------
   Tablas, código y vídeo desbordan una columna de 68 caracteres. Se
   ensanchan a los dos lados por igual, centrados sobre el eje de la
   columna, y el que sigue sin caber SCROLLEA DENTRO DE SU CAJA. El body
   no scrollea en horizontal nunca.

   Crecían solo hacia la derecha, que es lo que había que hacer cuando
   la columna vivía pegada al borde izquierdo. Ahora que va centrada,
   crecer por un lado los sacaría de la ventana. */
@media (min-width:900px){
  .prose > .table-responsive,
  .prose > table,
  .prose > pre,
  .prose > video{
    width:min(940px, calc(100vw - var(--pad) * 2));
    max-width:none;
    margin-left:50%; transform:translateX(-50%);
  }
}

/* ------------------------------------------------------------
   LA CAPA DE PROSA — las clases de Bootstrap que hay que resolver
   La lista sale de contar los 134 archivos, no de suponerla.
   ------------------------------------------------------------ */

/* Pesos. fw-bold a 600 y no a 700: en Instrument Sans el 700 pesa
   demasiado dentro de un párrafo. */
.prose .fw-bold{ font-weight:600; }
.prose .fw-700{ font-weight:600; }
.prose .fw-800{ font-weight:700; }
.prose .fw-100{ font-weight:300; }
.prose .font-italic{ font-style:italic; }

/* Entradilla */
.prose .lead{ font-size:1.25rem; line-height:1.55; color:var(--ink-2); }

/* Alineación */
.prose .text-left{ text-align:left; }
.prose .text-right{ text-align:right; }
.prose .text-center{ text-align:center; }

/* Márgenes literales: dicen lo que hacen y hacen lo que dicen. */
.prose .m-0px{ margin:0; }
.prose .m-25px-t{ margin-top:25px; }
.prose .m-20px-b{ margin-bottom:20px; }

/* La cita destacada. Aparece siempre igual: un div con bg-gray-100 y su
   border-left en línea, que gana a esto y está bien. */
.prose .bg-gray-100,
.prose .bg-light{
  background:var(--paper-sunk);
  padding:20px 20px 5px;
  margin:1.6em 0;
}
.prose .blockquote-footer{
  font-size:.875rem; color:var(--ink-3);
}
.prose .blockquote-footer cite{ font-style:italic; }

/* Celdas en verde y en rojo. Al 12 % sobre papel, con la tinta normal
   encima: el color dice de qué lado está la celda, no la hace ilegible. */
.prose .bg-success,
.prose .bg-success > td,
.prose .bg-success > th{
  background:rgba(47,111,79,.12);
  background:color-mix(in srgb, var(--positive) 12%, transparent);
  color:var(--ink);
}
.prose .bg-danger,
.prose .bg-danger > td,
.prose .bg-danger > th{
  background:rgba(163,53,41,.12);
  background:color-mix(in srgb, var(--error) 12%, transparent);
  color:var(--ink);
}
.prose .dark-color{ color:var(--ink); }
.prose .text-white{ color:var(--on-panel); }

/* La retícula de doce columnas SE NEUTRALIZA. Dentro de .prose no hay
   retícula: hay una columna de lectura, y estos contenedores solo
   servirían para meterle padding y anchos que compiten con ella. */
.prose .container,
.prose .container-fluid,
.prose .row,
.prose [class^="col-"],
.prose [class*=" col-"],
.prose [class^="offset-"],
.prose [class*=" offset-"]{
  display:block; width:auto; max-width:none;
  margin:0; padding:0; float:none;
}

/* Y las animaciones de una librería que ya no está. Sin opacity:0 de
   partida: con la librería fuera, lo que arrancaba invisible se
   quedaba invisible. */
.prose .wow,
.prose .fadeInUp,
.prose .animated{ opacity:1; animation:none; transform:none; visibility:visible; }

/* El jumbotron: un panel de campo hundido, y el titular de dentro al
   tamaño del sistema. */
.prose .jumbotron{
  background:var(--paper-sunk); border-radius:16px;
  padding:clamp(24px,4vw,40px); margin:1.6em 0;
}
.prose .display-4{
  font-family:var(--font-display); font-weight:var(--display-wght);
  letter-spacing:var(--display-tracking);
  font-size:clamp(1.85rem,3.2vw,3rem); line-height:1.08; margin:0 0 .4em;
}

/* Los botones que trae algún artículo, al botón del sistema. */
.prose .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-size:.9375rem; font-weight:500;
  padding:.7em 1.35em; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  text-decoration:none; cursor:pointer;
}
.prose .btn:hover{ border-color:var(--ink-3); }
.prose .btn-lg{ font-size:1.0625rem; padding:.85em 1.6em; }

/* La llamada final de un artículo: dos enlaces sueltos que sin nada
   alrededor se leían como dos párrafos más. */
.prose .final-cta{
  margin:2em 0 0; padding-top:1.4em;
  border-top:1px solid var(--ink);
}
.prose .final-cta p{ margin:0 0 .6em; }

/* ------------------------------------------------------------
   A3 · RELACIONADOS
   ------------------------------------------------------------ */
.art-related{ padding-top:clamp(64px,8vw,104px); padding-bottom:calc(var(--sec) / 2); }
.art-related .arts{ margin-top:32px; }

/* ------------------------------------------------------------
   A4 · CIERRE
   El separador ya ha puesto el aire de arriba.
   ------------------------------------------------------------ */
#a4{ padding-top:calc(var(--sec) / 2); }

@media (max-width:640px){
  .art-h1{ max-width:none; }
  .prose{ font-size:1rem; }
}

/* ------------------------------------------------------------
   LAS PÁGINAS LEGALES
   Reutilizan la cabecera y la columna de lectura del artículo: el
   cuerpo legal es el mismo HTML semántico y se lee igual.

   Lo único que no vale tal cual es el aire de abajo. En un artículo la
   columna cierra a cero porque debajo van los relacionados; en una
   legal, debajo va el pie, y sin esta línea el último párrafo queda
   pegado a él.
   ------------------------------------------------------------ */
.legal-body{ padding-bottom:var(--sec); }