/* ══════════════════════════════════════════════════════════════════
   BIBLIA PARALELA — SABIDURÍA Y REVELACIÓN

   NOTA: este archivo se llama paralela-2.css, no paralela.css.
   El nombre lleva número a propósito: hay cachés que ignoran la
   pregunta de versión en la dirección y siguen sirviendo la copia
   vieja. Cambiando el nombre cambia la dirección entera, y eso no lo
   ignora nadie. Si algún día vuelve a quedarse pegada, se sube el
   número.

   Tres columnas que se deslizan por separado. La lateral no se mueve
   mientras lees el centro, que es lo que hoy se pierde.

   Todo lo que puede crecer tiene su tope declarado. Nada empuja a
   nada: lo que no cabe se corta o se desliza dentro de su propia
   caja.

   Un solo corte: 900 px. Sobre eso, tres columnas. Bajo eso, todo
   apilado. Las secciones son las mismas; solo cambian de sitio.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Escala de grises azulados — la del sitio */
  --negro:#080C12; --tinta:#0D1117; --petroleo:#14212B; --pizarra:#1D3440;
  --verde:#16303A; --noche:#101B26; --hondo:#122430;
  --g600:#2A4553; --g500:#3A5666; --g400:#546B7A; --g300:#7A8C99;
  --g200:#A3B0BA; --g100:#CBD3DA; --g050:#E9EDF0;
  --hueso:#F5F3EE; --marfil:#EDEFEF; --blanco:#FFFFFF;

  /* Acentos */
  --calipso:#8FCFC6; --calipso-o:#1F7A6B;
  --celeste:#A8C8DC; --celeste-o:#356484;
  --arena:#E0C88F;   --arena-o:#8A6520;
  --terra:#D99C7A;   --terra-o:#A65635;

  --sans:'Lato',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;

  /* ── LAS MEDIDAS DE LA ESTRUCTURA ── */
  /* Angosta a propósito: con los números sin recuadro no necesita
     más, y todo lo que le sobre se lo lleva la comparación. */
  --lateral:265px;
  /* Lo que ocupa lo que haya encima de la herramienta.
     No es un número escrito a mano: se mide al cargar y cada vez que
     cambia. Si no hay cabecera, es cero y la herramienta ocupa toda la
     pantalla. Si la hay, se descuenta sola —y sigue calzando cuando la
     cabecera se encoge al bajar o cambia en el teléfono. */
  --alto-cab:0px;

  /* ── EL TAMAÑO DE LETRA ──
     Un solo número. Todo lo demás se calcula desde aquí, así que el
     ajuste de tamaño mueve esto y el resto sigue. */
  --texto:19px;

  /* ── COLORES QUE CAMBIAN CON EL MODO ── */
  --fondo:var(--tinta);
  --panel:var(--petroleo);
  --lado:var(--noche);
  --borde:var(--g600);
  --letra:var(--g050);
  --letra-2:var(--g200);
  --letra-3:var(--g400);
  --marca:var(--arena);
  --sec-contexto:var(--celeste);
  --sec-conexion:var(--terra);
  --sec-profund:var(--calipso);

  /* ── EL AVISO DE APILADO ──
     Bajo el corte, la herramienta se apila y la página entera se
     desliza: no hay nada que descontar arriba.
     Ese corte estaba escrito dos veces —aquí y a mano dentro de
     medir.js— y dos números iguales en dos archivos se separan solos
     el día que uno se mueve.
     Ahora el número vive únicamente en la regla del corte. medir.js
     no lo conoce: solo pregunta por este aviso.                     */
  --apilado:0;
}

/* ── MODO CLARO ── */
[data-modo="claro"]{
  --fondo:var(--hueso);
  --panel:var(--blanco);
  --lado:var(--marfil);
  --borde:#DDE3E7;
  --letra:var(--tinta);
  --letra-2:#3A5666;
  --letra-3:var(--g400);
  --marca:var(--arena-o);
  --sec-contexto:var(--celeste-o);
  --sec-conexion:var(--terra-o);
  --sec-profund:var(--calipso-o);
}

*{box-sizing:border-box;margin:0;padding:0}

body.syr-paralela{
  font-family:var(--sans);
  background:var(--fondo);
  color:var(--letra);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;            /* el desplazamiento vive en las columnas */
}

.syr-paralela a{color:inherit;text-decoration:none}
.syr-paralela img{display:block;max-width:100%}
.syr-paralela button{font-family:inherit;cursor:pointer}

/* ══════════════════════════════════════════════════════
   LA ESTRUCTURA — tres columnas, alto de la pantalla
   ══════════════════════════════════════════════════════ */
.pl{
  display:grid;
  grid-template-columns:var(--lateral) minmax(480px,1fr) minmax(460px,1.05fr);
  height:calc(100vh - var(--alto-cab));
  max-height:calc(100vh - var(--alto-cab));
  overflow:hidden;
  background:var(--fondo);
}

/* Cada columna se desliza sola y nunca empuja a las otras */
.pl > *{
  height:100%;
  min-height:0;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:auto;
  scrollbar-color:var(--g500) transparent;
}
/* Al doble de grosor: con 9 px había que apuntar para agarrarlas. */
.pl > *::-webkit-scrollbar{width:18px}
.pl > *::-webkit-scrollbar-track{background:transparent}
.pl > *::-webkit-scrollbar-thumb{
  background:var(--g500);
  border-radius:9px;
  border:5px solid transparent;   /* el color ocupa el centro */
  background-clip:content-box;
}
.pl > *::-webkit-scrollbar-thumb:hover{background:var(--g400);background-clip:content-box}

/* Las cajas de adentro: la rejilla y las secciones abiertas */
.pl-versos::-webkit-scrollbar,
.pl-sec-cuerpo::-webkit-scrollbar,
.pl-previo::-webkit-scrollbar{width:14px}
.pl-versos::-webkit-scrollbar-thumb,
.pl-sec-cuerpo::-webkit-scrollbar-thumb,
.pl-previo::-webkit-scrollbar-thumb{
  background:var(--g500);
  border-radius:7px;
  border:4px solid transparent;
  background-clip:content-box;
}

/* ══════════════════════════════════════════════════════
   COLUMNA 1 — LA NAVEGACIÓN
   ══════════════════════════════════════════════════════ */
.pl-lado{
  background:var(--lado);
  border-right:.5px solid var(--borde);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;  /* todo arriba, sin repartir el sobrante */
  overflow:hidden!important;   /* dentro se desliza solo la rejilla */
  padding:0;
}

.pl-lado-arriba{flex:0 0 auto;padding:18px 20px 6px}

/* ── EL TÍTULO ──
   Quien llega desde un enlace compartido no pasa por el inicio, y en
   teléfono la cabecera del sitio se esconde al bajar. Sin esto, no se
   sabe qué herramienta se está usando: son tres.

   Va como dibujo y no como texto: así no depende de que ninguna
   fuente haya cargado, y se ve igual en cualquier navegador. */
.pl-titulo{
  display:block;
  width:100%;
  max-width:186px;
  height:auto;
  margin:0 0 16px;
  padding-bottom:14px;
  border-bottom:.5px solid var(--borde);
}

/* En modo claro el crema y el blanco se pierden sobre fondo claro,
   así que el dibujo se oscurece. */
[data-modo="claro"] .pl-titulo{
  filter:brightness(.42) saturate(1.5);
}

.pl-rot{
  height:16px; line-height:16px;
  font-size:11px; font-weight:900;
  letter-spacing:1.9px; text-transform:uppercase;
  color:var(--letra-3);
  margin:0 0 7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-rot + .pl-rot{margin-top:18px}

.pl-sel{
  width:100%;
  height:48px;
  padding:0 38px 0 15px;
  margin:0 0 18px;
  background:var(--panel);
  border:.5px solid var(--borde);
  border-radius:6px;
  color:var(--letra);
  font-size:15px;
  appearance:none;
  cursor:pointer;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A8C99' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  transition:border-color .2s;
}
.pl-sel:hover,.pl-sel:focus{border-color:var(--marca);outline:none}

/* ── La rejilla de versículos ──
   Salmos 119 tiene 176. Se desliza dentro de sí misma; nunca crece
   ni empuja a la barra de abajo. */
/* Ocupa solo lo que necesita, no todo lo que hay.
   Con Juan son 36 versículos y cinco filas; con «flex:1» el resto
   quedaba vacío y la barra de herramientas se iba al fondo dejando
   un hueco.
   El tope es lo que quede de pantalla: si el libro es Salmos 119 con
   176 versículos, ahí sí llena y se desliza dentro. */
.pl-versos{
  flex:0 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:0 20px 16px;
  scrollbar-width:thin;
}
/* Números sueltos, sin recuadro. Con borde ocupaban el doble y la
   lateral se veía escandalosa al lado del texto. */
.pl-versos-rej{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.pl-v{
  height:30px;
  display:flex; align-items:center; justify-content:center;
  border:none;
  border-radius:4px;
  background:transparent;
  color:var(--letra-2);
  font-size:13.5px; font-weight:700;
  transition:all .14s;
  padding:0;
}
.pl-v:hover{background:rgba(224,200,143,.13);color:var(--marca)}
.pl-v.on{background:var(--marca);color:var(--tinta);font-weight:900}

/* ── La barra de herramientas, pegada abajo ── */
/* Pegada debajo de la rejilla, no al fondo de la columna.
   Sin «margin-top:auto», que la empujaría al fondo y dejaría el
   hueco que había justo debajo de los números. */
.pl-herr{
  flex:0 0 58px;
  height:58px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-top:.5px solid var(--borde);
  background:var(--lado);
}
/* El botón mide 42 y el icono 26: llena casi todo su cuadro.
   Con 19 dentro de 40 se veían perdidos y nadie sabía qué eran. */
.pl-h{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:.5px solid transparent;
  border-radius:6px;
  background:none;
  color:var(--letra-2);
  transition:all .18s;
  padding:0;
}
.pl-h svg{width:26px;height:26px}
.pl-h:hover{border-color:var(--marca);color:var(--marca)}
.pl-h.on{color:var(--marca)}

/* ══════════════════════════════════════════════════════
   COLUMNA 2 — LA COMPARACIÓN
   ══════════════════════════════════════════════════════ */
.pl-centro{background:var(--fondo);padding:0}
.pl-centro-in{padding:26px 34px 44px;max-width:900px;margin:0 auto}

/* Flechas de anterior y siguiente, arriba y abajo */
.pl-pasos{
  display:flex; align-items:center; justify-content:space-between;
  height:44px;
  margin-bottom:14px;
}
.pl-pasos.abajo{margin:34px 0 0}
.pl-paso{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none;
  color:var(--marca);
  transition:transform .16s,opacity .16s;
  padding:0;
}
.pl-paso:hover{transform:scale(1.15)}
.pl-paso:disabled{opacity:.28;cursor:default;transform:none}

.pl-ref{
  flex:1 1 auto; min-width:0;
  text-align:center;
  font-family:var(--sans);
  font-size:27px; font-weight:900;
  letter-spacing:-.3px;
  color:var(--letra);
  line-height:44px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:0 12px;
}

/* ── UNA VERSIÓN ── */
/* Apretado a propósito: cada línea y cada separación que se ahorra
   es media versión más visible sin bajar. */
.pl-ver{
  display:grid;
  grid-template-columns:62px 1fr;   /* la sigla nunca crece */
  gap:14px;
  align-items:start;
  padding:8px 0;
  margin-bottom:0;
}
.pl-ver + .pl-ver{border-top:.5px solid var(--borde)}

.pl-sigla{
  width:62px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--marca);
  border-radius:4px;
  color:var(--marca);
  font-size:11.5px; font-weight:900; letter-spacing:.7px;
  white-space:nowrap; overflow:hidden;
  margin-top:3px;
}
.pl-txt{
  font-family:var(--serif);
  font-size:var(--texto);
  line-height:1.55;
  color:var(--letra);
  overflow-wrap:anywhere;
  margin:0;
}
.pl-nom{
  font-size:12.5px; color:var(--letra-3);
  margin-bottom:2px; line-height:1.3;
}

/* Los botones de versión */
.pl-vers-btns{
  display:flex; flex-wrap:wrap; gap:7px;
  padding-bottom:18px; margin-bottom:8px;
  border-bottom:.5px solid var(--borde);
}
.pl-vb{
  height:30px; padding:0 12px;
  border:.5px solid var(--borde);
  border-radius:15px;
  background:none;
  color:var(--letra-3);
  font-size:11.5px; font-weight:900; letter-spacing:.7px;
  transition:all .18s;
  white-space:nowrap;
}
.pl-vb:hover{border-color:var(--marca);color:var(--marca)}
.pl-vb.on{background:var(--marca);border-color:var(--marca);color:var(--tinta)}

/* ══════════════════════════════════════════════════════
   COLUMNA 3 — LAS SECCIONES
   ══════════════════════════════════════════════════════ */
.pl-secs{background:var(--fondo);padding:26px 26px 44px}

.pl-sec{
  background:var(--panel);
  border:.5px solid var(--borde);
  border-radius:8px;
  margin-bottom:20px;
  overflow:hidden;
}

.pl-sec-cab{
  display:flex; align-items:center; gap:11px;
  height:52px; padding:0 20px;
  border-bottom:.5px solid var(--borde);
  position:relative;
}
.pl-sec-cab::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--g500);
}
.pl-sec-ic{display:flex;flex:none}
.pl-sec-tit{
  font-size:13px; font-weight:900;
  letter-spacing:1.7px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-sec-n{
  margin-left:auto; flex:none;
  font-size:12.5px; font-weight:700;
  color:var(--letra-3);
  white-space:nowrap;
}

.pl-sec.contexto .pl-sec-cab::before{background:var(--sec-contexto)}
.pl-sec.contexto .pl-sec-tit,.pl-sec.contexto .pl-sec-ic{color:var(--sec-contexto)}
.pl-sec.conexion .pl-sec-cab::before{background:var(--sec-conexion)}
.pl-sec.conexion .pl-sec-tit,.pl-sec.conexion .pl-sec-ic{color:var(--sec-conexion)}
.pl-sec.profund  .pl-sec-cab::before{background:var(--sec-profund)}
.pl-sec.profund  .pl-sec-tit,.pl-sec.profund  .pl-sec-ic{color:var(--sec-profund)}

/* ── El cuerpo: asomado o abierto, nunca a medias ── */
.pl-sec-cuerpo{padding:8px 20px 16px}

/* El asomo es corto a propósito: mostrar tres versículos basta para
   entender de qué va, y así Conexión y Profundidad —que son las que
   importan— suben y se ven sin bajar. */
.pl-sec-cuerpo.asomo{
  position:relative;
  height:190px;              /* exacto, no mínimo */
  overflow:hidden;
}
.pl-sec-cuerpo.asomo::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:84px;
  background:linear-gradient(to bottom,transparent,var(--panel) 88%);
  pointer-events:none;
}

/* Contexto se corre hasta el versículo actual, así que también hay
   contenido cortado arriba. Un degradado en el borde superior lo dice
   sin necesidad de explicarlo. */
#cuerpoContexto.asomo::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:34px; z-index:2;
  background:linear-gradient(to top,transparent,var(--panel) 88%);
  pointer-events:none;
}
#cuerpoContexto.asomo{position:relative}

/* Abierta crece hasta aquí y de ahí se desliza dentro de sí misma:
   nunca empuja a las secciones de abajo fuera de lugar. */
.pl-sec-cuerpo.abierta{
  max-height:70vh;
  overflow-y:auto;
  scrollbar-width:thin;
}

/* El «hidden» del HTML no gana contra un display declarado. Sin esta
   línea, el botón que el JavaScript manda esconder sigue a la vista
   con el texto del versículo anterior: la caja decía «no tiene
   referencias» y el botón «VER LAS 13 REFERENCIAS» al mismo tiempo. */
.pl-sec-btn[hidden]{display:none}

.pl-sec-btn{
  display:block; width:100%;
  height:46px;
  border:none; border-top:.5px solid var(--borde);
  background:rgba(58,86,102,.16);
  color:var(--letra);
  font-size:12px; font-weight:900;
  letter-spacing:1.3px; text-transform:uppercase;
  transition:background .2s,color .2s;
  padding:0 16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-sec-btn:hover{background:rgba(58,86,102,.3);color:var(--marca)}

/* ── Un versículo dentro de una sección ── */
.pl-item{
  padding:12px 0;
  border-bottom:.5px solid rgba(58,86,102,.34);
  cursor:pointer;
  transition:padding-left .18s;
}
.pl-item:last-child{border-bottom:none}
.pl-item:hover{padding-left:8px}
.pl-item:hover .pl-cita{color:var(--marca)}
.pl-cita{
  font-size:13px; font-weight:900; letter-spacing:.6px;
  margin-bottom:4px;
  transition:color .18s;
}
.pl-item-txt{
  font-family:var(--serif);
  font-size:calc(var(--texto) - 3px);
  line-height:1.62;
  color:var(--letra-2);
  overflow-wrap:anywhere;
}
.pl-grupo{
  font-size:11.5px; font-weight:900;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--letra-3);
  margin:16px 0 8px; padding-top:14px;
  border-top:.5px solid var(--borde);
}
.pl-grupo:first-child{margin-top:4px;padding-top:0;border-top:none}

/* ── El contexto: el versículo actual marcado ── */
/* Más apretado: entre versículo y versículo sobraba aire, y en una
   lista de 36 eso son varias pantallas de más. */
.pl-ctx{
  display:grid; grid-template-columns:22px 1fr; gap:9px;
  padding:5px 0; cursor:pointer; border-radius:4px;
  transition:background .16s;
}
.pl-ctx:hover{background:rgba(233,237,240,.05)}
.pl-ctx.aqui{
  background:rgba(168,200,220,.1);
  box-shadow:inset 3px 0 0 var(--sec-contexto);
  padding-left:11px; cursor:default;
  grid-template-columns:26px 1fr;
}
.pl-ctx-n{
  font-size:11.5px; font-weight:900; color:var(--letra-3);
  padding-top:3px; text-align:right;
}
.pl-ctx-t{
  font-family:var(--serif);
  font-size:calc(var(--texto) - 3px);
  line-height:1.5; color:var(--letra-2);
  overflow-wrap:anywhere;
}
.pl-ctx.aqui .pl-ctx-n{color:var(--sec-contexto)}
.pl-ctx.aqui .pl-ctx-t{color:var(--letra);font-weight:600}

.pl-vacio{
  color:var(--letra-3); font-size:15px;
  padding:16px 0; font-style:italic;
}

/* ══════════════════════════════════════════════════════
   EL CAPÍTULO (la otra página)

   Aquí no hay tercera columna: el texto es lo único que
   importa. La lateral se queda igual y el capítulo ocupa
   el resto, con tope de línea para que no se haga ancho
   de más y canse al leer.
   ══════════════════════════════════════════════════════ */
.pl-lector{grid-template-columns:var(--lateral) 1fr}
.pl-centro-ancho .pl-centro-in{max-width:820px}

.pl-cap-tit{
  font-family:var(--serif);
  font-size:clamp(26px,3vw,36px);
  font-weight:600; color:var(--letra);
  line-height:1.2; margin-bottom:5px;
}
.pl-cap-ver{
  font-size:13.5px; letter-spacing:.4px;
  color:var(--letra-3); margin-bottom:30px;
}
.pl-cap-txt{
  font-family:var(--serif);
  font-size:var(--texto);
  line-height:1.85;
  color:var(--letra);
  max-width:70ch;
}
.pl-n{
  font-size:.66em; font-weight:900;
  color:var(--marca);
  vertical-align:super;
  margin-right:3px;
  cursor:pointer;
  padding:0 1px;
}
.pl-vs{cursor:pointer;transition:background .16s;border-radius:3px;padding:0 2px}
.pl-vs:hover{background:rgba(224,200,143,.13)}
.pl-vs.on{background:rgba(224,200,143,.18);box-shadow:0 0 0 1px rgba(224,200,143,.4)}

.pl-pista{
  margin-top:28px; padding:14px 18px;
  background:var(--panel);
  border:.5px solid var(--borde);
  border-left:3px solid var(--sec-profund);
  border-radius:6px;
  color:var(--letra-2); font-size:14.5px; line-height:1.6;
}

/* ══════════════════════════════════════════════════════
   COMPARTIR
   ══════════════════════════════════════════════════════ */
.pl-tapa{
  position:fixed; inset:0; z-index:400;
  background:rgba(8,12,18,.86);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.pl-tapa.on{display:flex}
.pl-caja{
  width:100%; max-width:420px;
  background:var(--panel);
  border:.5px solid var(--borde);
  border-radius:10px;
  overflow:hidden;
}
.pl-caja-cab{
  display:flex; align-items:center; justify-content:space-between;
  height:54px; padding:0 20px;
  border-bottom:.5px solid var(--borde);
}
.pl-caja-cab h2{
  font-size:13px; font-weight:900;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--letra-2);
}
.pl-x{
  width:36px; height:36px; border-radius:50%;
  border:.5px solid var(--borde); background:none;
  color:var(--letra-2); font-size:17px;
}
.pl-x:hover{border-color:var(--marca);color:var(--marca)}
.pl-caja-cuerpo{padding:18px 20px 22px}
.pl-previo{
  font-family:var(--serif); font-size:16px; line-height:1.62;
  color:var(--letra-2);
  padding:14px 16px; margin-bottom:18px;
  background:var(--fondo); border-radius:6px;
  max-height:150px; overflow-y:auto;
}
.pl-redes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pl-red{
  height:46px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:.5px solid var(--borde); border-radius:6px;
  background:none; color:var(--letra-2);
  font-size:14px; font-weight:700;
  transition:all .18s;
}
.pl-red:hover{border-color:var(--marca);color:var(--marca)}
.pl-red.ancho{grid-column:1 / -1}

/* ══════════════════════════════════════════════════════
   BUSCADOR
   ══════════════════════════════════════════════════════ */
.pl-busca{
  position:fixed; inset:0; z-index:380;
  background:rgba(8,12,18,.93);
  display:none; padding:6vh 0;
  overflow-y:auto;
}
.pl-busca.on{display:block}
.pl-busca-caja{max-width:820px;margin:0 auto;padding:0 24px}
.pl-campo{
  display:flex; align-items:center; gap:11px;
  height:52px; padding:0 16px;
  background:var(--panel);
  border:.5px solid var(--borde);
  border-radius:7px;
}
.pl-campo:focus-within{border-color:var(--marca)}
.pl-campo input{
  flex:1 1 auto; min-width:0;
  background:none; border:none; outline:none;
  color:var(--letra); font-size:16px; font-family:inherit;
}
.pl-campo input::placeholder{color:var(--letra-3)}
.pl-ayuda{
  margin-top:11px; font-size:13.5px; color:var(--letra-3);
  line-height:1.6;
}
.pl-ayuda b{color:var(--letra-2)}
.pl-resu{margin-top:20px}
.pl-resu mark{
  background:rgba(224,200,143,.24); color:var(--marca);
  padding:0 2px; border-radius:2px;
}

/* ══════════════════════════════════════════════════════
   CARGANDO
   ══════════════════════════════════════════════════════ */
.pl-cargando{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:60px 0; color:var(--letra-3); font-size:15px;
}
.pl-giro{
  width:18px; height:18px;
  border:2px solid var(--borde); border-top-color:var(--marca);
  border-radius:50%;
  animation:pl-girar .8s linear infinite;
}
@keyframes pl-girar{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════
   ENTRE 900 Y 1200 — la lateral se recoge
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1200px) and (min-width:901px){
  .pl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pl-lado{
    position:fixed; top:var(--alto-cab); bottom:0; left:0;
    width:300px; z-index:120;
    transform:translateX(-100%);
    transition:transform .24s ease;
  }
  .pl-lado.abierta{transform:none}
  .pl-abrir-lado{display:flex!important}
}
.pl-abrir-lado{display:none}

/* ══════════════════════════════════════════════════════════════════
   ▄▄▄  T E L É F O N O  ▄▄▄   bajo 900 px

   Las tres columnas se apilan. Las secciones son las mismas: solo
   cambian de sitio. Nada nuevo que definir.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* Apilado: aquí la página entera se desliza, así que la cabecera
     del sitio no hay que descontarla.
     El aviso en 1 es lo que lee medir.js. */
  :root{--alto-cab:0px; --apilado:1}

  body.syr-paralela{overflow:auto}

  .pl{
    display:block;
    height:auto;
    max-height:none;
    overflow:visible;
  }
  .pl > *{height:auto;overflow:visible}

  /* ── La navegación se desarma en filas ── */
  .pl-lado{
    display:block;
    height:auto;
    overflow:visible!important;
    border-right:none;
    border-bottom:.5px solid var(--borde);
    position:sticky; top:0; z-index:50;
    background:var(--lado);
  }
  .pl-lado-arriba{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px 16px 10px;
  }
  .pl-lado-arriba .pl-rot{display:none}
  .pl-sel{margin:0;height:44px;font-size:16px}
  .pl-sel-cap{grid-column:1 / -1}

  /* Los versículos pasan a una tira que se desliza de lado */
  .pl-versos{
    padding:0 0 10px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
  }
  .pl-versos::-webkit-scrollbar{display:none}
  .pl-versos-rej{
    display:flex; gap:5px; flex-wrap:nowrap;
    padding:0 16px;
  }
  .pl-v{flex:0 0 auto;min-width:40px;height:36px;font-size:13.5px}

  /* Las herramientas, en la misma fila de los selectores */
  .pl-herr{
    height:auto; flex:none;
    border-top:.5px solid var(--borde);
    padding:6px 16px;
    justify-content:flex-start; gap:6px;
  }
  .pl-h{width:38px;height:38px}

  /* ── La comparación ── */
  .pl-centro-in{padding:20px 16px 32px;max-width:none}
  .pl-ref{font-size:23px}
  .pl-ver{grid-template-columns:56px 1fr;gap:12px}
  .pl-sigla{width:56px;height:24px;font-size:11px}
  .pl-vers-btns{gap:6px}
  .pl-vb{height:28px;padding:0 10px;font-size:11px}

  /* ── Las secciones, apiladas al final ── */
  .pl-secs{padding:6px 16px 40px}
  .pl-sec{margin-bottom:16px}
  .pl-sec-cab{height:48px;padding:0 16px;gap:9px}
  .pl-sec-tit{font-size:12px;letter-spacing:1.4px}
  .pl-sec-cuerpo{padding:6px 16px 14px}
  .pl-sec-cuerpo.asomo{height:220px}
  .pl-sec-cuerpo.abierta{max-height:none}   /* en teléfono se abre entera */
  .pl-sec-btn{height:44px;font-size:11.5px}

  /* ── El capítulo ── */
  .pl-cap-tit{font-size:24px}
  .pl-cap-txt{max-width:none;line-height:1.8}

  /* ── Compartir ── */
  .pl-redes{grid-template-columns:1fr}
}

/* Pantallas muy angostas */
@media(max-width:380px){
  .pl-lado-arriba{padding:10px 14px 8px;gap:8px}
  .pl-versos-rej{padding:0 14px}
  .pl-centro-in{padding:16px 14px 28px}
  .pl-secs{padding:6px 14px 34px}
  .pl-ref{font-size:21px}
  .pl-ver{grid-template-columns:50px 1fr;gap:10px}
  .pl-sigla{width:50px;font-size:10.5px}
}

/* Quien pide menos movimiento, lo recibe */
@media(prefers-reduced-motion:reduce){
  .syr-paralela *{transition:none!important;animation:none!important}
}