/* Virgen de Medjugorje · Cinco piedras
   Hoja propia de /cinco-piedras. Se enlaza después de sitio.css.
   Sistema «Piedra, cielo y vela»: solo tokens de sitio.css y clases con el prefijo .piedras-.
   Filetes de 1 px y manchas planas; sin sombras, sin cajas, sin degradados con volumen.
   No redefine componentes compartidos: los ajusta dentro de un contenedor propio. */

/* ==========================================================================
   Cabecera de la página: más baja que la de una portada, para que las cinco piedras
   asomen en la primera pantalla
   ========================================================================== */

.piedras-cabecera { padding-bottom: var(--e-5); }
.piedras-cabecera .foto__img {
  height: 24vh;
  height: 24svh;
  max-height: 24svh;
  min-height: 8.5rem;
  object-position: 50% 62%;
}
/* El segundo botón de la cabecera solo cabe con holgura desde tableta */
.piedras-solo-ancho { display: none; }
@media (min-width: 640px) {
  .piedras-solo-ancho { display: inline-flex; }
}
@media (min-width: 900px) {
  .piedras-cabecera { min-height: clamp(22rem, 46vh, 27rem); padding-block: var(--e-6); }
  .piedras-cabecera .foto__img { height: 100%; max-height: none; min-height: 0; }
}

/* ==========================================================================
   Las cinco piedras (SVG propio, en línea, familia de la ilustración del sitio)
   Cinco cantos de río, cada uno con su silueta. Se pintan con manchas planas: el cuerpo de
   caliza, una faceta de luz arriba a la izquierda, una de sombra abajo a la derecha, una
   veta y, en dos de ellas, la mancha de tierra rojiza del Podbrdo. Encima, el contorno fino
   del sitio (1.5 px en la fila) y, grabado con un mismo trazo, el signo de su práctica:
   el rosario, el cáliz con la hostia, el libro abierto, el pan con el agua y las dos llaves
   cruzadas (el signo de siempre del sacramento del perdón: «las llaves del Reino», Mt 16, 19).
   La confesión llevó antes una estola; a tamaño chico se leía como un arco o una herradura,
   y por eso se cambió. Si se quiere volver a ella, su dibujo era, dentro de
   <g class="piedras-signo" transform="translate(60 56) scale(.9)">:
     M-17.5 19.5C-16 10-13.5 1-12.5-7C-12-15.5-7.5-21 0-21C7.5-21 12-15.5 12.5-7C13.5 1 16 10 17.5 19.5
     M-6 19.5C-6.6 10-7 1-6.5-6.5C-6-11-3.6-13.8 0-13.8C3.6-13.8 6-11 6.5-6.5C7 1 6.6 10 6 19.5
     M-17.5 19.5H-6M6 19.5H17.5
     M-15.9 19.5v3.6M-13 19.5v3.6M-10.1 19.5v3.6M-7.4 19.5v3.6M7.4 19.5v3.6M10.1 19.5v3.6M13 19.5v3.6M15.9 19.5v3.6
     M-11 4.5V14M-13.6 8h5.2M11 4.5V14M8.4 8h5.2
   Sin degradados, sin brillos y sin sombras proyectadas.
   Todos los colores salen de los tokens de sitio.css (mezclas con color-mix): siguen el
   día y la impresión, y la noche lleva su propio ajuste.
   El dibujo de cada piedra vive una sola vez, en la fila (<g id="piedra-…">); el apartado
   de cada piedra lo repite en pequeño con <use>. Si se cambia una silueta, va tres veces
   con el mismo trazado: en el recorte (<clipPath>), en el cuerpo y en el contorno.
   ========================================================================== */

.piedras-piedra {
  /* Cuánta tierra rojiza lleva la caliza de esta piedra (cada una, la suya) */
  --p-rojo: 6%;
  /* y cuánto gris: más gris, más oscura */
  --p-gris: 13%;
  --p-caliza: color-mix(in srgb, var(--tinta-3) var(--p-gris), var(--banda-piedra));
  --p-cuerpo: color-mix(in srgb, var(--piedra) var(--p-rojo), var(--p-caliza));
  --p-luz: color-mix(in srgb, var(--superficie) 58%, var(--p-cuerpo));
  --p-sombra: color-mix(in srgb, var(--tinta-3) 24%, var(--p-cuerpo));
  --p-tierra: color-mix(in srgb, var(--piedra) 36%, var(--p-cuerpo));
  --p-veta: color-mix(in srgb, var(--superficie) 88%, var(--p-cuerpo));
  --p-mota: color-mix(in srgb, var(--tinta-3) 45%, var(--p-cuerpo));
  --p-borde: color-mix(in srgb, color-mix(in srgb, var(--piedra-texto) 45%, var(--tinta-3)) 80%, var(--p-cuerpo));
  --p-signo: var(--piedra-texto);
  --p-signo-luz: color-mix(in srgb, var(--superficie) 70%, var(--p-cuerpo));
  /* Grosor del trazo del signo, en unidades del dibujo (120 de ancho), y del contorno, en
     pixeles: los dos se ajustan al tamaño al que se dibuja la piedra */
  --p-trazo: 2.1;
  --p-filo: 1.25px;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.piedras-piedra--eucaristia { --p-rojo: 12%; --p-gris: 10%; }
.piedras-piedra--biblia { --p-rojo: 24%; --p-gris: 10%; }
.piedras-piedra--ayuno { --p-rojo: 2%; --p-gris: 24%; }
.piedras-piedra--confesion { --p-rojo: 4%; --p-gris: 5%; }
:root[data-hora="noche"] .piedras-piedra {
  /* De noche las piedras no se apagan: quedan a media luz, más claras que el papel oscuro */
  --p-caliza: color-mix(in srgb, var(--tinta-3) calc(24% + var(--p-gris)), var(--superficie-2));
  --p-luz: color-mix(in srgb, var(--tinta-2) 26%, var(--p-cuerpo));
  --p-sombra: color-mix(in srgb, var(--fondo) 42%, var(--p-cuerpo));
  --p-tierra: color-mix(in srgb, var(--piedra) 30%, var(--p-cuerpo));
  --p-veta: color-mix(in srgb, var(--tinta) 50%, var(--p-cuerpo));
  --p-mota: color-mix(in srgb, var(--fondo) 45%, var(--p-cuerpo));
  --p-borde: color-mix(in srgb, var(--tinta-3) 62%, var(--fondo));
  --p-signo: color-mix(in srgb, var(--piedra-texto) 80%, var(--tinta));
  --p-signo-luz: color-mix(in srgb, var(--fondo) 55%, var(--p-cuerpo));
}
.piedras-piedra__cuerpo { fill: var(--p-cuerpo); }
.piedras-piedra__luz { fill: var(--p-luz); }
.piedras-piedra__sombra { fill: var(--p-sombra); }
.piedras-piedra__tierra { fill: var(--p-tierra); }
.piedras-piedra__veta,
.piedras-piedra__mota {
  fill: none;
  stroke: var(--p-veta);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.piedras-piedra__veta--fina { stroke-width: .9; }
.piedras-piedra__veta--roja { stroke: var(--p-tierra); stroke-width: 1.3; }
.piedras-piedra__mota { stroke: var(--p-mota); stroke-width: 1.7; }
.piedras-piedra__borde {
  fill: none;
  stroke: var(--p-borde);
  stroke-width: var(--p-filo);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.piedras-signo {
  fill: none;
  color: var(--p-signo);
  stroke: var(--p-signo);
  stroke-width: var(--p-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* El signo está grabado: el mismo dibujo, repetido un punto abajo y a la derecha en un tono
   claro, hace de labio iluminado de la muesca */
.piedras-signo__luz { color: var(--p-signo-luz); stroke: var(--p-signo-luz); }
/* Las cuentas del rosario: el mismo trazo, a puntos */
.piedras-signo__cuentas { stroke-width: calc(var(--p-trazo) * 1.75); stroke-dasharray: 0 5; }
.piedras-signo__lleno { fill: currentColor; stroke: none; }
.piedras-piedra__cuerpo, .piedras-piedra__luz, .piedras-piedra__sombra, .piedras-piedra__tierra {
  transition: fill var(--dur-tema) ease;
}
.piedras-piedra__veta, .piedras-piedra__mota, .piedras-piedra__borde, .piedras-signo {
  transition: stroke var(--dur-tema) ease;
}
.piedras-signo__lleno { transition: fill var(--dur-tema) ease; }

/* La fila. En celular es una lista: la piedra a la izquierda y su nombre al lado, un renglón
   por piedra entre filetes; así el signo se ve a buen tamaño y el nombre se lee entero.
   Desde 760 px, las cinco en fila, apoyadas en el agua del arroyo, con el nombre debajo. */

.piedras-cinco { padding-block: var(--e-5) var(--e-6); }
.piedras-cinco__titulo { margin: 0 0 var(--e-3); }
.piedras-fila { position: relative; }
.piedras-fila ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.piedras-fila li {
  min-width: 0;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.piedras-fila a {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--e-4);
  min-height: 2.75rem;
  padding-block: var(--e-2);
  color: var(--tinta);
  text-decoration: none;
}
.piedras-fila__texto { display: grid; gap: .1rem; min-width: 0; }
.piedras-fila__orden {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.piedras-fila__nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.1;
}
.piedras-fila__como {
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--tinta-3);
}
.piedras-fila a:hover .piedras-fila__nombre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--lit);
}
/* El arroyo solo acompaña a la fila; en la lista no hace falta */
.piedras-arroyo { display: none; }
.piedras-arroyo__agua {
  fill: color-mix(in srgb, var(--cielo) 28%, var(--fondo));
  transition: fill var(--dur-tema) ease;
}
.piedras-arroyo__linea {
  fill: none;
  stroke: var(--cielo);
  stroke-width: 1.5px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--dur-tema) ease;
}

@media (min-width: 760px) {
  .piedras-fila {
    /* Ancho de cada piedra: cabe siempre en su quinta parte de la fila */
    --p-ancho: clamp(6rem, 20vw - 3.5rem, 13.5rem);
  }
  .piedras-fila ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--e-3);
    border-top: 0;
  }
  .piedras-fila li { border-bottom: 0; }
  .piedras-fila a {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: var(--e-3);
    padding-block: 0 var(--e-2);
    text-align: center;
  }
  .piedras-fila .piedras-piedra {
    --p-trazo: 2;
    width: var(--p-ancho);
    transition: transform var(--dur) var(--curva);
  }
  .piedras-fila a:hover .piedras-piedra { transform: translateY(-3px); }
  .piedras-fila__texto { justify-items: center; gap: .15rem; }
  .piedras-fila__nombre { font-size: clamp(1.375rem, .7rem + 1.5vw, 2rem); }
  /* El agua pasa por detrás, a la altura en que se apoyan las cinco (y = 87 de 96 en el
     dibujo, cuyo alto es 0.8 veces su ancho); su línea queda a .75rem del borde de arriba */
  .piedras-arroyo {
    position: absolute;
    top: calc(var(--p-ancho) * .8 * .906 - .75rem);
    left: 0;
    display: block;
    width: 100%;
    height: 1.75rem;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .piedras-cinco { padding-block: var(--e-6) var(--e-7); }
  .piedras-cinco__titulo { margin-bottom: var(--e-5); }
  .piedras-fila ol { gap: var(--e-5); }
  .piedras-fila .piedras-piedra { --p-trazo: 1.7; --p-filo: 1.5px; }
  .piedras-fila a { gap: var(--e-4); }
}

/* ==========================================================================
   Como las de David (banda cálida)
   ========================================================================== */

.piedras-david.seccion { padding-block: var(--e-6); }
@media (min-width: 900px) {
  .piedras-david.seccion { padding-block: var(--e-7); }
}
.piedras-david__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  align-items: center;
}
.piedras-david__texto { max-width: var(--ancho-texto); }
.piedras-david__texto .seccion__titulo { margin-bottom: var(--e-3); }
/* La escena y el origen del nombre: un renglón que se abre en su lugar; desde 1024 px va
   abierto (data-abre-en-ancho, /js/plegables.js) */
.piedras-origen.acordeon { max-width: none; }
.piedras-origen > summary { font-family: var(--f-texto); font-size: var(--t-base); font-weight: 500; }
.piedras-origen > div { color: var(--tinta-2); }
.piedras-origen > div > p:last-child { margin-bottom: 0; }
.piedras-david__cita { margin: 0; }
@media (min-width: 960px) {
  .piedras-david__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); }
}

/* ==========================================================================
   Cada piedra: un renglón ancho entre filetes (sin tarjeta)
   ========================================================================== */

.piedras-una { padding-block: var(--e-6) var(--e-5); }
@media (min-width: 900px) {
  .piedras-una { padding-block: var(--e-7) var(--e-6); }
}
.piedras-una__cabeza { max-width: 44rem; margin-bottom: var(--e-5); }
.piedras-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
/* Cada piedra: su dibujo y su nombre; qué es; y, aparte, cómo empezar, a dónde ir y lo que
   va plegado (lo que dice la Iglesia y los mensajes donde aparece). */
.piedras-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
  transition: border-color var(--dur-tema) ease;
}
.piedras-art__cabeza { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
/* La misma piedra de la fila, en pequeño (un <use> de su dibujo): el orden lo dice la etiqueta */
.piedras-art__piedra { flex: none; width: 5rem; --p-trazo: 2.2; }
.piedras-art__cabeza .etiqueta { margin-bottom: var(--e-1); }
.piedras-art__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.05;
  text-wrap: balance;
}
.piedras-art__texto { min-width: 0; max-width: var(--ancho-texto); }
.piedras-art__texto > p { color: var(--tinta-2); }
.piedras-art__texto > :last-child { margin-bottom: 0; }
.piedras-art__lado { min-width: 0; max-width: var(--ancho-texto); }
.piedras-art__empezar { margin: 0 0 var(--e-2); color: var(--tinta); }
.piedras-art__empezar strong {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.piedras-art__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.piedras-art__iglesia {
  margin: var(--e-3) 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--lit);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
  transition: border-color var(--dur-tema) ease;
}

/* La Iglesia y los mensajes: un renglón que se abre en su lugar */
.piedras-mensajes { min-width: 0; margin-top: var(--e-2); }
.piedras-mensajes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
  padding-block: var(--e-2);
  border-top: 1px solid var(--linea);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--dur-tema) ease;
}
.piedras-mensajes[open] > summary { border-bottom: 1px solid var(--linea); }
.piedras-mensajes > summary::-webkit-details-marker { display: none; }
.piedras-mensajes > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin: 0 .35rem .25rem 0;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.piedras-mensajes[open] > summary::after { margin-bottom: -.15rem; transform: rotate(-135deg); }
.piedras-mensajes__titulo {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.piedras-mensajes__cuenta { margin-left: .4rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.piedras-mensajes__criterio {
  margin: var(--e-3) 0 var(--e-1);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-2);
}
.piedras-mensajes ul { margin: 0; padding: 0; list-style: none; }
.piedras-mensajes li { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.piedras-mensajes li:last-child { border-bottom: 0; }
.piedras-mensajes li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem 0;
  color: var(--tinta);
  text-decoration: none;
}
.piedras-mensajes li a:hover .piedras-mensajes__fecha { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.piedras-mensajes__fecha {
  color: var(--enlace);
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: lining-nums;
}
.piedras-mensajes__meta {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--tinta-3);
}

/* Celular: el rótulo «Para empezar» va en la misma línea que su texto */
@media (max-width: 639.98px) {
  .piedras-art { padding-block: var(--e-4); }
  .piedras-art__empezar strong { display: inline; margin: 0 .5em 0 0; }
}

/* Escritorio: tres columnas (nombre, qué es, cómo empezar) y cada piedra cabe en media pantalla */
@media (min-width: 1024px) {
  .piedras-art {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) minmax(0, 21rem);
    gap: var(--e-7);
    align-items: start;
    padding-block: var(--e-6);
  }
  /* La piedra arriba y, debajo, su orden y su nombre */
  .piedras-art__cabeza { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .piedras-art__piedra { width: 8.5rem; margin-left: -.4rem; --p-trazo: 1.8; }
  .piedras-art__titulo { font-size: var(--t-lg); line-height: 1.1; }
  .piedras-mensajes { margin-top: var(--e-4); }
}

/* ==========================================================================
   Final: dos salidas y las fuentes
   ========================================================================== */

/* Para seguir: el índice editorial del sitio (.lista-ed), sin columna de número. En escritorio,
   el título ocupa la columna de los nombres de las piedras y la lista, las otras dos. */
.piedras-sigue { padding-block: var(--e-5) var(--e-6); }
.piedras-sigue__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.piedras-sigue__titulo { margin: 0; }
.piedras-sigue__lista { grid-template-columns: minmax(0, 1fr) max-content; }
.piedras-sigue__lista .lista-ed__cuerpo { grid-column: 1; }
.piedras-sigue__lista .lista-ed__enlace > .flecha { grid-column: 2; }
@media (min-width: 1024px) {
  .piedras-sigue { padding-block: var(--e-6) var(--e-7); }
  .piedras-sigue__rejilla {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--e-7);
    align-items: start;
  }
}

/* Fuentes al final: plegadas, un renglón entre filetes */
.piedras-fuentes { padding-block: var(--e-5) var(--seccion); }
.piedras-fuentes__plegado {
  max-width: var(--ancho-texto);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.piedras-fuentes__plegado > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
  padding-block: var(--e-3);
  list-style: none;
  cursor: pointer;
}
.piedras-fuentes__plegado > summary::-webkit-details-marker { display: none; }
.piedras-fuentes__plegado > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin: 0 .35rem .25rem 0;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.piedras-fuentes__plegado[open] > summary::after { margin-bottom: -.15rem; transform: rotate(-135deg); }
.piedras-fuentes__titulo {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.piedras-fuentes__cuenta { margin-left: .4rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.piedras-fuentes .fuentes { margin: 0; padding: 0 0 var(--e-5); border-top: 0; }

/* ==========================================================================
   Movimiento reducido e impresión
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .piedras-fila a,
  .piedras-fila .piedras-piedra,
  .piedras-mensajes > summary::after,
  .piedras-fuentes__plegado > summary::after { transition: none; }
  .piedras-fila a:hover .piedras-piedra { transform: none; }
}
@media print {
  .piedras-cinco { padding-block: 0 1rem; }
  .piedras-arroyo { display: none; }
  .piedras-art__piedra { width: 4rem; }
  .piedras-sigue { display: none; }
  .piedras-art { display: block; break-inside: avoid; }
  .piedras-art__cabeza, .piedras-art__texto { margin-bottom: .6rem; }
  .piedras-mensajes > summary::after,
  .piedras-fuentes__plegado > summary::after { display: none; }
  .piedras-mensajes::details-content,
  .piedras-fuentes__plegado::details-content { content-visibility: visible; block-size: auto; }
}