/* Páginas institucionales y legales: /sobre-nosotros, /contacto, /principios-editoriales,
   /politica-correcciones, /como-recomendamos, /fuentes-referencia, /politica-privacidad, /terminos-uso,
   /politica-cookies y sus gemelas inglesas. La carga solo templates/institucional/_base.html.

   Diseño elegido el 2026-10-12 (propuesta C «Editorial» de la ronda 2, molde /articulos; registro en
   design-proposals/institutional-pages/): cabecera en rejilla bajo un filete de tinta (titular grande ·
   entradilla y datos), barra de índice horizontal fija con el apartado activo subrayado en tinta, y
   apartados a dos columnas con el título fijo a la izquierda mientras se lee. Al pie, la banda gris
   verdosa con flecha en círculo (molde K de «Sigue explorando»). Sin tarjetas, sombras, pastillas ni
   iconos decorativos; el azul, solo en los enlaces.

   Todo cuelga de .pi y lleva prefijo pi-: en producción las clases de Tailwind se renombran
   (tailwindcss-patch) y una clase propia con nombre de utilidad se rompería. */

.pi{
  --ink:rgb(var(--gris-900)); --ink2:rgb(var(--gris-700)); --mute:rgb(var(--gris-600)); --soft:rgb(var(--gris-500)); --faint:rgb(var(--gris-400));
  --bg:var(--surface); --bg1:var(--ground); --bg2:rgb(var(--gris-100));
  --line:var(--hair); --line2:rgb(var(--gris-100)); --blue:var(--azul);
  --acc:var(--bev); /* antetítulo y numeración del índice: contenido en Pizarra; el azul, solo enlaces */
  --cabecera:80px;  /* la cabecera fija de base.html (h-20) */
  --barra:52px;     /* la barra fija del índice: margen de los anclajes y de los títulos fijos */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.5;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
.pi :where(h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote){ margin:0; }
.pi a{ color:inherit; text-decoration:none; }
.pi img{ display:block; max-width:100%; }
.pi-wrap{ max-width:1280px; margin:0 auto; padding:0 16px; }
@media (min-width:640px){ .pi-wrap{ padding:0 24px; } }
@media (min-width:1024px){ .pi-wrap{ padding:0 32px; } }

/* ── Cabecera: [antetítulo + titular] [entradilla + datos], bajo un filete de tinta ── */
.pi-hd{ display:grid; gap:16px 48px; margin-top:40px; padding-top:20px; border-top:1px solid var(--ink); }
.pi-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--acc); }
.pi-hd h1{ margin-top:8px; font-size:40px; line-height:1; font-weight:800; letter-spacing:-.04em; color:var(--ink); }
.pi-lead{ max-width:640px; font-size:17px; line-height:1.55; color:var(--ink2); }
.pi-lead strong{ font-weight:600; color:var(--ink); }
.pi-meta{ display:flex; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--soft); }
.pi-meta span + span::before{ content:"·"; margin:0 8px; color:var(--faint); }
@media (min-width:900px){ .pi-hd{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:end; } }
@media (min-width:1024px){ .pi-hd{ margin-top:56px; } .pi-hd h1{ font-size:64px; } }

/* ── Barra del índice: fija bajo la cabecera del sitio; en móvil se desplaza en horizontal y
   institucional.js la mueve para que el apartado activo quede a la vista ── */
.pi-barra{ position:sticky; top:var(--cabecera); z-index:20; margin-top:40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); }
.pi-barra ol{ display:flex; gap:8px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.pi-barra ol::-webkit-scrollbar{ display:none; }
.pi-barra li{ flex:none; }
.pi-barra a{ display:flex; align-items:baseline; gap:6px; padding:15px 12px 13px; margin-bottom:-1px; border-bottom:2px solid transparent;
  white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--mute); transition:color .12s, border-color .12s; }
.pi-barra li:first-child a{ padding-left:0; }
.pi-barra i{ font-style:normal; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--acc); }
.pi-barra a:hover{ color:var(--ink); }
/* Apartado que se está leyendo (lo marca institucional.js): estado seleccionado, en tinta. */
.pi-barra a[aria-current]{ border-bottom-color:var(--ink); color:var(--ink); }

/* ── Cuerpo ── */
.pi-prose{ font-size:16px; line-height:1.7; color:var(--ink2); }
.pi-prose p{ margin-bottom:18px; }
.pi-prose p:last-child{ margin-bottom:0; }
.pi-prose strong{ font-weight:600; color:var(--ink); }
.pi-prose em{ font-style:italic; }
.pi-prose code{ padding:1px 5px; border-radius:4px; background:var(--bg2); font-size:14px; overflow-wrap:anywhere; }
/* Enlaces de texto: tinta con subrayado gris, como en la ficha de artículo. */
.pi-prose p a, .pi-prose li a, .pi-prose td a, .pi-prose dd a{
  color:var(--ink); text-decoration:underline; text-decoration-color:rgb(var(--gris-300)); text-underline-offset:3px; overflow-wrap:anywhere; }
.pi-prose p a:hover, .pi-prose li a:hover, .pi-prose td a:hover, .pi-prose dd a:hover{ text-decoration-color:currentColor; }

.pi-prose h3{ margin:32px 0 10px; font-size:18px; line-height:1.3; font-weight:700; color:var(--ink); }
.pi-prose ul{ margin:0 0 18px; padding-left:22px; list-style:disc; }
.pi-prose li{ margin-bottom:8px; }
.pi-prose li::marker{ color:var(--faint); }
@media (max-width:639px){ .pi-prose{ line-height:1.65; } }

/* Nota: aviso o matiz dentro de un apartado. --fuerte: una afirmación que el texto subraya. */
.pi-nota{ margin:24px 0; padding:14px 18px; border-left:2px solid var(--ink); background:var(--bg1); font-size:15px; line-height:1.6; }
.pi-prose .pi-nota p{ margin-bottom:10px; }
.pi-prose .pi-nota p:last-child{ margin-bottom:0; }
.pi-nota--fuerte{ padding:4px 0 4px 20px; background:none; font-size:18px; line-height:1.5; color:var(--ink); }

/* Lista de filas: enumeraciones «Término: explicación» (derechos, finalidades, bases legales…). */
.pi-prose .pi-lista{ list-style:none; margin:24px 0; padding:0; border-top:1px solid var(--line); }
.pi-prose .pi-lista li{ margin:0; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.6; }
/* --dos: dos columnas de LISTA (se leen de arriba abajo, en el orden del texto), no una rejilla. */
@media (min-width:640px){
  .pi-prose .pi-lista--dos{ columns:2; column-gap:32px; }
  .pi-prose .pi-lista--dos li{ break-inside:avoid; }
}

/* Filas con título: bloques que antes eran tarjetas. Título a la izquierda y texto a la derecha
   desde 640 px; numeradas cuando son pasos. */
.pi-filas{ margin:28px 0; border-top:1px solid var(--ink); }
.pi-fila{ padding:18px 0; border-bottom:1px solid var(--line); }
.pi-prose .pi-fila h3{ margin:0 0 6px; font-size:16px; line-height:1.35; }
.pi-fila p, .pi-fila li{ font-size:15px; line-height:1.6; }
.pi-num{ display:block; margin-bottom:2px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--acc); }
@media (min-width:640px){
  .pi-fila{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; }
  .pi-prose .pi-fila h3{ margin:0; }
}

/* Tabla */
.pi-tabla{ margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:6px; -webkit-overflow-scrolling:touch; }
.pi-tabla table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.45; }
.pi-tabla th{ padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg1); text-align:left; font-weight:600; color:var(--ink); }
.pi-tabla td{ padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:top; }
.pi-tabla td:first-child{ font-weight:600; color:var(--ink); }
.pi-tabla tr:last-child td{ border-bottom:0; }

/* Firma del responsable editorial (el avatar de la firma de los artículos). */
.pi-firma{ display:flex; align-items:center; gap:14px; margin:20px 0; }
.pi-firma img{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--bg2); }

/* Muestra del bloque de actualizaciones de la ficha de artículo (.af-refs h3 + .af-up en articulo-nuevo.css). */
.pi-muestra{ margin:24px 0; padding:20px 20px 22px; border:1px solid var(--line); }
.pi-muestra h3{ display:flex; align-items:baseline; gap:8px; margin:0 0 12px; font-size:13px; line-height:1.4; font-weight:600; color:var(--ink); }
.pi-muestra h3 span{ font-size:12px; font-weight:400; color:var(--soft); }
.pi-up{ list-style:none; margin:0 0 0 3px; padding:0; border-left:1px solid var(--line); }
.pi-prose .pi-up li{ position:relative; margin:0; padding:0 0 20px 20px; }
.pi-prose .pi-up li:last-child{ padding-bottom:0; }
.pi-up li::before{ content:""; position:absolute; top:4px; left:-4px; width:7px; height:7px; border-radius:50%; background:var(--ink); }
.pi-up time{ display:block; margin-bottom:4px; font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.pi-up div{ font-size:13.5px; line-height:1.55; color:var(--ink2); }

/* Contacto: la dirección, a la vista (contact.js la descifra; los ids son suyos). */
.pi-correo{ margin:28px 0 8px; padding:20px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.pi-correo small{ display:block; margin-bottom:6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.pi .pi-correo a{ font-size:22px; line-height:1.3; font-weight:700; letter-spacing:-.01em; color:var(--blue); overflow-wrap:anywhere; }
.pi .pi-correo a:hover{ text-decoration:underline; }
@media (min-width:640px){ .pi .pi-correo a{ font-size:26px; } }

/* Fuentes de referencia: lista con logotipo; los canales de un grupo cuelgan sangrados de su matriz. */
.pi-prose .pi-fuentes{ list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--ink); }
.pi-prose .pi-fuentes > li{ margin:0; padding:20px 0; border-bottom:1px solid var(--line); }
.pi-fuente{ display:flex; gap:16px; align-items:flex-start; }
.pi-fuente-lg{ flex:none; width:48px; height:48px; border:1px solid var(--line); background:var(--bg); overflow:hidden; }
.pi-fuente-lg img{ width:100%; height:100%; object-fit:contain; }
.pi-fuente-tx{ min-width:0; }
.pi-prose .pi-fuente h2, .pi-prose .pi-fuente h3{ margin:0; font-size:16px; line-height:1.35; font-weight:700; color:var(--ink); }
.pi-prose .pi-fuente p{ margin:0; }
.pi-fuente-tipo{ margin-top:2px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.pi-prose .pi-fuente p.pi-fuente-d{ margin:6px 0 0; font-size:14.5px; line-height:1.55; }
.pi .pi-ir{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--blue); text-decoration:none; }
.pi .pi-ir:hover{ text-decoration:underline; }
.pi-prose .pi-canales{ list-style:none; margin:16px 0 0; padding:0 0 0 64px; }
.pi-prose .pi-canales > li{ margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line2); }
@media (max-width:639px){ .pi-prose .pi-canales{ padding-left:0; } }

/* Cierre: la invitación final a escribir, sin banda oscura. */
.pi-cierre{ margin-top:56px; padding-top:20px; border-top:1px solid var(--ink); }
.pi-prose .pi-cierre h2{ margin:0 0 10px; font-size:20px; line-height:1.3; font-weight:700; color:var(--ink); }

/* ── Al pie: las demás páginas (molde K, como «Sigue explorando» del silo y el pie de la ficha de
   artículo). La banda se extiende a todo el ancho con una sombra recortada, no con 100vw. ── */
.pi-mas{ margin-top:72px; padding:36px 0 40px; background:var(--rail); box-shadow:0 0 0 100vmax var(--rail); clip-path:inset(0 -100vmax); }
.pi-mas h2{ margin-bottom:16px; font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.pi-links{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:48px; border-top:1px solid var(--ink); }
@media (min-width:768px){ .pi-links{ grid-template-columns:1fr 1fr; } }
.pi-go{ display:flex; align-items:center; gap:18px; padding:14px 2px; border-bottom:1px solid color-mix(in srgb, var(--ink) 11%, var(--rail)); }
.pi-go span{ flex:1; min-width:0; font-size:16px; line-height:1.25; font-weight:700; letter-spacing:-.015em; color:var(--ink);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color .15s; }
.pi-go i{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--bg); color:var(--ink);
  font-style:normal; font-size:15px; line-height:1; transition:background .15s, color .15s, transform .15s; }
.pi-go:hover span{ text-decoration-color:var(--ink); }
.pi-go:hover i{ background:var(--ink); color:var(--bg); transform:translateX(3px); }
.pi-go:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ── Apartados: filete de tinta; desde 900 px, título fijo a la izquierda (5/12) y texto a la derecha ── */
.pi-sec{ margin-top:72px; padding-top:18px; border-top:1px solid var(--ink); scroll-margin-top:calc(var(--cabecera) + var(--barra) + 16px); }
.pi-prose > .pi-sec:first-child{ margin-top:56px; }
.pi-sec-hd{ margin:0 0 20px; }
.pi-h2n{ display:block; margin-bottom:6px; font-size:12px; font-weight:600; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--faint); }
.pi-sec h2{ font-size:26px; line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
/* El cuerpo de un apartado arranca a ras de su título (una lista o una nota traen margen arriba). */
.pi-sec-bd > :first-child{ margin-top:0; }
/* Cuerpo que abre con texto y no con un apartado (contacto, fuentes). */
.pi-prose > :first-child:not(.pi-sec){ margin-top:48px; }
@media (min-width:900px){
  .pi-sec{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:48px; }
  .pi-sec-hd{ position:sticky; top:calc(var(--cabecera) + var(--barra) + 24px); align-self:start; margin:0; }
  .pi-sec h2{ font-size:30px; }
  .pi-sec-bd{ max-width:720px; }
  /* Lo que no es un apartado (texto de entrada, lista de fuentes, cierre) va en la columna del texto. */
  .pi-prose > :not(.pi-sec){ max-width:720px; margin-left:calc((100% - 48px) * 5 / 12 + 48px); }
}