/* ============================================================================
   FICHA Y DIRECTORIO DE IGLESIAS
   ============================================================================
   Estilos de la ficha individual (single-iglesia.php) y del directorio de
   tarjetas (archive-iglesia.php). Usan la paleta de la marca (crema/oro/navy).
   ========================================================================== */

:root {
	/* El directorio y la ficha usan la PALETA DE LA MARCA del tema, que es
	   personalizable en «Personalizar → Colores de la marca». Los colores base
	   (--sb-crema, --sb-oro, --sb-tinta) los aporta el tema en :root, así que aquí
	   NO los redefinimos: los heredamos y siguen al Personalizador. Solo mapeamos
	   los alias propios de este archivo a esa misma paleta, para que todo el
	   conjunto cambie junto si se ajustan los colores. */
	--sb-navy: var(--sb-vino, #5a1220);        /* antes era navy; ahora el VINO del logotipo */
	--sb-oro2: var(--sb-oro-claro, #c9a55e);   /* oro claro (derivado del tema) */
	--sb-crema2: var(--sb-crema-honda, #f0e9d9); /* crema honda (derivado del tema) */
	--sb-suave: var(--sb-tinta-suave, #75684f); /* texto suave (derivado del tema) */
	--sb-borde: #e6dcc3;                        /* borde crema (fijo) */
}

/* ------------------------------- LA FICHA -------------------------------- */
.sb-ficha { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }

/* Cabecera con foto (o degradado si no hay foto). El título va sobre un velo
   oscuro para que se lea encima de cualquier imagen. */
.sb-ficha-hero {
	position: relative;
	border-radius: 0 0 22px 22px;
	overflow: hidden;
	background: linear-gradient(150deg, var(--sb-vino-claro, #871b30), var(--sb-vino, #5a1220));
	min-height: 240px;
	display: flex;
	align-items: flex-end;
}
.sb-ficha-hero.con-foto { min-height: 380px; }
.sb-ficha-hero-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* Velo degradado para que el texto blanco se lea sobre la foto. */
/* EL VELO QUE HACE LEGIBLE EL TÍTULO SOBRE CUALQUIER FOTO
   -------------------------------------------------------
   El título va en blanco ENCIMA de la fotografía, y las fotos no se eligen:
   vienen de Wikimedia Commons y cada una es como es. En la ficha de San Roque
   de Tarija —un templo claro contra un cielo despejado— el título y el enlace
   «← Iglesias» quedaban sobre una zona casi blanca y costaba leerlos.

   El degradado anterior sólo empezaba a oscurecer a partir del 60 % de la
   altura, y el título está por encima de esa línea. Ahora sube antes y con
   más cuerpo, así que el texto se lee tanto sobre una foto oscura como sobre
   un muro encalado a mediodía.

   No se sube más porque entonces la fotografía se apagaría: la idea es que se
   vea el templo Y se lea el nombre. */
.sb-ficha-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top,
		rgba(10, 10, 25, .88) 0%,
		rgba(10, 10, 25, .62) 32%,
		rgba(10, 10, 25, .28) 62%,
		rgba(10, 10, 25, .10) 85%,
		transparent 100%);
}
/* Y una sombra bajo el texto, que es lo que salva los casos extremos: si la
   foto tiene una zona clara justo detrás de una línea, el velo por sí solo no
   siempre basta. */
.sb-ficha-hero-cap h1,
.sb-ficha-hero-cap .sb-ficha-dir,
.sb-ficha-hero-cap .sb-ficha-volver {
	text-shadow: 0 1px 3px rgba(10, 10, 25, .55);
}
.sb-ficha-hero-cap { position: relative; z-index: 2; padding: 30px 34px; color: #fff; width: 100%; }
.sb-ficha-volver {
	display: inline-block;
	color: var(--sb-oro2);
	text-decoration: none;
	font-size: .9rem;
	margin-bottom: 10px;
}
.sb-ficha-volver:hover { color: #fff; }
.sb-ficha-hero-cap h1 {
	font-family: 'Literata', Georgia, serif;
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin: 0;
	line-height: 1.15;
}
.sb-ficha-dir { margin: 10px 0 0; color: #e7dfce; font-size: 1rem; }
/* Crédito de la foto de portada: pequeño, abajo a la derecha, legible sobre la
   imagen. Es obligatorio por la licencia (CC BY-SA) mostrar el autor. */
.sb-ficha-credito {
	position: absolute;
	right: 10px; bottom: 8px;
	z-index: 3;
	background: rgba(10, 10, 25, .55);
	color: #eee;
	font-size: .72rem;
	padding: 3px 9px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}
/* Crédito bajo cada foto de la galería. */
.sb-ficha-figura { margin: 0; }
.sb-ficha-figura figcaption { font-size: .72rem; color: var(--sb-suave); margin-top: 4px; line-height: 1.3; }

/* Cuerpo en dos columnas: contenido principal + barra lateral. */
.sb-ficha-cuerpo {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 34px;
	margin-top: 30px;
}
.sb-ficha-principal h2,
.sb-ficha-lado h2 {
	font-family: 'Literata', Georgia, serif;
	color: var(--sb-navy);
	font-size: 1.4rem;
	margin: 0 0 14px;
}
.sb-ficha-principal section { margin-bottom: 34px; }
.sb-ficha-historia { line-height: 1.75; color: var(--sb-tinta); font-size: 1.05rem; }

/* Servicios como "insignias". */
.sb-ficha-serv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sb-ficha-serv-lista li {
	background: var(--sb-crema2);
	border: 1px solid var(--sb-borde);
	border-radius: 999px;
	padding: 8px 16px;
	color: var(--sb-tinta);
	font-size: .95rem;
}
.sb-ficha-serv-lista li::before { content: "\2714"; color: var(--sb-oro); margin-inline-end: 7px; }
/* Servicios que SÍ tienen explicación: se ven "tocables" (cursor + un signo de
   pregunta al final) y, al hacer clic, muestran una tarjetita con la definición. */
.sb-ficha-serv-lista li.sb-serv-clic { cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease; }
.sb-ficha-serv-lista li.sb-serv-clic::after { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-inline-start: 7px; border-radius: 50%; background: var(--sb-oro); color: #fff; font-size: .68rem; font-weight: 700; vertical-align: middle; }
.sb-ficha-serv-lista li.sb-serv-clic:hover { background: #fff; border-color: var(--sb-oro); }
/* La tarjetita flotante con la explicación del término. */
.sb-serv-pop {
	position: absolute;
	left: 0; top: calc(100% + 8px);
	z-index: 50;
	width: min(320px, 78vw);
	background: #fff;
	border: 1px solid var(--sb-borde);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(24, 24, 48, .16);
	padding: 14px 16px;
	text-align: start;
	cursor: default;
	animation: sb-serv-in .16s ease;
}
@keyframes sb-serv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sb-serv-pop strong { display: block; font-family: 'Literata', Georgia, serif; color: var(--sb-navy); margin-bottom: 6px; font-size: 1rem; }
.sb-serv-pop p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--sb-tinta); }

/* Galería en cuadrícula. */
.sb-ficha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sb-ficha-grid a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; }
.sb-ficha-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.sb-ficha-grid a:hover img { transform: scale(1.05); }

/* Barra lateral: datos + mapa. */
.sb-ficha-datos {
	background: var(--sb-crema);
	border: 1px solid var(--sb-borde);
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 18px;
}
.sb-dato { display: flex; gap: 12px; margin-bottom: 14px; }
.sb-dato:last-child { margin-bottom: 0; }
.sb-dato-ic { font-size: 1.1rem; line-height: 1.4; }
.sb-dato-etq { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-oro); font-weight: 700; }
.sb-dato a { color: var(--sb-tinta); }
.sb-dato a:hover { color: var(--sb-oro); }

/* --- TARJETA DE HORARIOS DE MISA: filas «día → horas», ordenadas y claras --- */
.sb-ficha-horarios {
	background: var(--sb-crema);
	border: 1px solid var(--sb-borde);
	border-radius: 16px;
	padding: 22px;
	margin-bottom: 18px;
}
.sb-ficha-horarios h2 { display: flex; align-items: center; gap: 9px; }
.sb-hor-ic { font-size: 1.1rem; line-height: 1; }
.sb-hor-lista { display: flex; flex-direction: column; }
/* Cada día en su fila, con el nombre a la izquierda y las horas a la derecha,
   separadas por una línea fina para que se lean como un horario de verdad. */
.sb-hor-fila {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--sb-crema2);
}
.sb-hor-fila:first-child { border-top: 0; padding-top: 2px; }
.sb-hor-dia {
	flex: none;
	font-weight: 700;
	color: var(--sb-navy); /* el vino de la marca */
	font-size: .95rem;
}
.sb-hor-horas {
	text-align: right;
	color: var(--sb-tinta);
	font-size: .95rem;
	font-variant-numeric: tabular-nums; /* las cifras alinean bonito */
}
/* Entradas que no tienen un día claro (texto libre): a todo el ancho, discretas. */
.sb-hor-prosa { display: block; }
.sb-hor-prosa .sb-hor-horas { text-align: left; color: var(--sb-suave); font-size: .9rem; line-height: 1.5; }

/* Mini-mapa. */
.sb-ficha-mapa { height: 240px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sb-borde); }
.sb-ficha-comollegar { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* Botones (compartidos con el directorio). */
.sb-ficha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--sb-oro);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 999px;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
/* Los iconos de los botones son SVG (antes eran emoji y no se dibujaban en
   muchos equipos). `flex-shrink: 0` evita que el icono se aplaste si el texto
   traducido es largo: en alemán o en francés estos botones crecen bastante. */
.sb-ficha-ico { flex-shrink: 0; }
.sb-ficha-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(154, 123, 63, .3); color: #fff; }
.sb-ficha-btn.sec { background: #fff; color: var(--sb-oro); border: 1px solid var(--sb-borde); }
.sb-ficha-btn.sec:hover { color: var(--sb-oro); }

@media (max-width: 860px) {
	.sb-ficha-cuerpo { grid-template-columns: 1fr; }

	/* EL CRÉDITO DE LA FOTO SE TAPABA CON LA DIRECCIÓN
	   ------------------------------------------------
	   En pantalla ancha, el crédito cabe en una línea y se queda abajo a la
	   derecha sin molestar. En un móvil ocupa DOS líneas y crece hacia arriba,
	   justo encima de la dirección del templo: en la ficha de Izamal se leía
	   «Foto: … vía Wikimedia Commons» pisando «Centro de Izamal, Yucatán».
	   No es un problema estético: **tapaba un dato**.

	   Aquí el crédito deja de flotar y pasa a ser una franja propia pegada al
	   borde inferior de la foto, a todo el ancho. Así no puede solaparse con
	   nada, y la atribución que exigen las licencias CC sigue estando a la
	   vista, que es lo obligatorio. */
	.sb-ficha-credito {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		border-radius: 0;
		padding: 5px 14px;
		text-align: center;
		background: rgba(10, 10, 25, .72);
	}
	/* Y se le reserva sitio al texto para que nunca quede debajo. */
	.sb-ficha-hero-cap { padding-bottom: 46px; }
}

/* ----------------------------- EL DIRECTORIO ----------------------------- */
.sb-directorio { max-width: 1140px; margin: 0 auto; padding: 40px 20px 60px; }
.sb-dir-cab { text-align: center; margin-bottom: 40px; }
.sb-dir-cab h1 { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 2.4rem; margin: 0 0 10px; }
.sb-dir-sub { color: var(--sb-suave); max-width: 620px; margin: 0 auto 22px; line-height: 1.6; }

/* --- BUSCADOR + FILTROS (centrados en la página) --- */
.sb-dir-filtros { max-width: 860px; margin: 0 auto 38px; }
/* Caja de búsqueda: lupa a la izquierda + campo, centrada y ancha. */
.sb-dir-buscar {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1.5px solid var(--sb-oro2);
	border-radius: 40px; padding: 4px 20px; margin: 0 auto 16px;
	max-width: 560px; box-shadow: 0 6px 18px rgba(24, 24, 48, .06);
	transition: border-color .18s, box-shadow .18s;
}
.sb-dir-buscar:focus-within { border-color: var(--sb-oro); box-shadow: 0 8px 24px rgba(201, 165, 94, .22); }
.sb-dir-lupa { color: var(--sb-oro); display: flex; }
.sb-dir-buscar input {
	flex: 1; border: 0; outline: 0; background: transparent;
	font-size: 1.05rem; padding: 12px 0; color: var(--sb-navy); font-family: inherit;
}
/* Fila de desplegables en cascada: se envuelven en móvil y quedan centrados. */
.sb-dir-selects { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sb-dir-selects select {
	appearance: none; -webkit-appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8912e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1.5px solid var(--sb-crema2); border-radius: 12px;
	padding: 11px 36px 11px 15px; font-size: .95rem; color: var(--sb-navy);
	font-family: inherit; cursor: pointer; min-width: 150px; transition: border-color .18s;
}
.sb-dir-selects select:hover { border-color: var(--sb-oro2); }
.sb-dir-selects select:focus { outline: 0; border-color: var(--sb-oro); }
.sb-dir-selects select:disabled { opacity: .5; cursor: not-allowed; }
.sb-dir-limpiar {
	background: transparent; border: 1.5px solid var(--sb-crema2); color: var(--sb-suave);
	border-radius: 12px; padding: 11px 18px; font-size: .95rem; cursor: pointer;
	font-family: inherit; transition: color .18s, border-color .18s;
}
.sb-dir-limpiar:hover { color: var(--sb-navy); border-color: var(--sb-oro2); }
.sb-dir-conteo { text-align: center; color: var(--sb-suave); font-size: .9rem; margin: 16px 0 0; }

.sb-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.sb-dir-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sb-borde);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sb-dir-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(24, 24, 48, .1); border-color: var(--sb-oro2); }
.sb-dir-foto { aspect-ratio: 16 / 10; background: var(--sb-crema2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-dir-foto img { width: 100%; height: 100%; object-fit: cover; }
.sb-dir-foto-vacia { font-size: 3rem; color: var(--sb-oro2); opacity: .6; }
.sb-dir-txt { padding: 20px; }
.sb-dir-txt h2 { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 1.25rem; margin: 0 0 8px; }
.sb-dir-dir { color: var(--sb-oro); font-size: .88rem; margin: 0 0 8px; }
.sb-dir-ext { color: var(--sb-suave); font-size: .95rem; line-height: 1.55; margin: 0; }
.sb-dir-vacio { text-align: center; color: var(--sb-suave); padding: 40px; }

/* De dónde salen los datos del directorio. Va discreto —es un crédito, no un
   mensaje— pero legible: la licencia de OpenStreetMap obliga a que se pueda
   encontrar y a que el enlace se vea como enlace, así que no se baja el
   contraste ni se le quita el subrayado. */
.sb-dir-fuente {
	text-align: center;
	color: var(--sb-suave);
	font-size: .85rem;
	margin: 28px auto 8px;
	max-width: 46rem;
	padding: 0 16px;
}
.sb-dir-fuente a { color: inherit; text-decoration: underline; }
.sb-dir-nav { margin-top: 34px; text-align: center; }
.sb-dir-nav a, .sb-dir-nav .current { padding: 8px 13px; margin: 0 3px; border-radius: 8px; text-decoration: none; }
.sb-dir-nav .current { background: var(--sb-oro); color: #fff; }

/* ============================================================================
   NOTICIAS ↔ IGLESIA
   ============================================================================
   Dos piezas de la misma relación:
     .sb-noticia-iglesias  → la tarjeta que va al final de una NOTICIA y lleva
                             a la ficha de la iglesia de la que habla.
     .sb-ficha-noticias    → la lista de noticias que va dentro de la FICHA.
   Las dos usan la paleta de la marca heredada del tema, así que siguen al
   Personalizador igual que el resto del directorio.
   ========================================================================== */

/* CUIDADO CON LA ESPECIFICIDAD DE LAS FOTOS DE ESTAS TARJETAS
   -----------------------------------------------------------
   Estas dos tarjetas se imprimen DENTRO del cuerpo del artículo, y ahí hay
   DOS reglas ajenas que se pelean con la miniatura. Las dos son razonables por
   separado; juntas rompían la tarjeta:

     1. `.sb-single-content img { max-width: 100%; height: auto; }`  (0,1,1)
        del tema hijo. Es un reset normal para las fotos de un artículo.

     2. `.post .wp-post-image { object-fit: cover; width: 100%; }`   (0,2,0)
        del tema padre. Y esta es la mala: **WordPress le pone la clase
        `wp-post-image` a TODA miniatura destacada**, incluida la nuestra, por
        mucho que le pasemos nuestra propia clase.

   La regla 2 tiene la MISMA especificidad que `.sb-noticia-iglesias
   .sb-noticia-iglesia-img` y su hoja carga DESPUÉS, así que ganaba por orden.
   El síntoma era desconcertante: **el alto obedecía y el ancho no** —60 px de
   alto por 290 de ancho—, porque solo el ancho estaba en disputa.

   Por eso la foto se califica con TRES clases, (0,3,0), que gana sin
   `!important`. Se midió con `scripts/inspeccionar_estilos.js`, que dice qué
   regla gana y de qué hoja sale; adivinarlo mirando el archivo es imposible.

   Si algún día se renombra alguna de estas clases, hay que mantener las tres
   o el tema padre volverá a estirar la miniatura a ancho completo. */

/* --- La tarjeta dentro de la noticia --- */
.sb-noticia-iglesias { margin: 38px 0 0; padding: 20px; border: 1px solid var(--sb-oro2); border-radius: 14px; background: var(--sb-crema2); }
.sb-noticia-iglesias-tit { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 1.05rem; margin: 0 0 12px; }
.sb-noticia-iglesias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sb-noticia-iglesia-enl { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid transparent; transition: border-color .18s ease, transform .18s ease; }
.sb-noticia-iglesia-enl:hover,
.sb-noticia-iglesia-enl:focus-visible { border-color: var(--sb-oro); transform: translateY(-2px); }
.sb-noticia-iglesias .sb-noticia-iglesia-enl .sb-noticia-iglesia-img { width: 72px; height: 72px; min-width: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; margin: 0; }
.sb-noticia-iglesia-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-noticia-iglesia-nom { color: var(--sb-navy); font-size: .98rem; line-height: 1.3; }
.sb-noticia-iglesia-lugar { color: var(--sb-suave); font-size: .86rem; }
.sb-noticia-iglesia-cta { color: var(--sb-oro); font-size: .84rem; font-weight: 600; margin-top: 4px; }

/* --- La lista dentro de la ficha --- */
.sb-ficha-noticias { margin-top: 38px; }
.sb-ficha-noticias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sb-ficha-noticia-enl { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 12px; border-radius: 12px; border: 1px solid var(--sb-oro2); background: #fff; transition: border-color .18s ease, transform .18s ease; }
.sb-ficha-noticia-enl:hover,
.sb-ficha-noticia-enl:focus-visible { border-color: var(--sb-oro); transform: translateY(-2px); }
.sb-ficha-noticias .sb-ficha-noticia-enl .sb-ficha-noticia-img { width: 76px; height: 76px; min-width: 76px; object-fit: cover; border-radius: 8px; flex-shrink: 0; margin: 0; }
.sb-ficha-noticia-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-ficha-noticia-tit { color: var(--sb-navy); font-size: 1.02rem; line-height: 1.35; }
.sb-ficha-noticia-fecha { color: var(--sb-suave); font-size: .84rem; }

/* EN MÓVIL SE MANTIENE LA FILA, Y ESTO CAMBIÓ A PROPÓSITO
   -------------------------------------------------------
   Antes, por debajo de 420 px la foto y el texto se apilaban y la foto pasaba
   a ancho completo con 150 px de alto. La intención era buena —evitar que el
   título quedara en dos letras por línea—, pero el resultado era peor que el
   problema: una tarjeta que anuncia UN enlace ocupaba media pantalla, y en la
   pantalla real quedaba fea.

   Se mantiene la fila y se encoge la foto. A 320 px, un thumb de 60 px deja
   unos 215 px para el título: suficiente para tres palabras por línea, que es
   como se lee cualquier lista de un teléfono. */
@media (max-width: 420px) {
	.sb-noticia-iglesias,
	.sb-ficha-noticias-lista { padding-inline: 0; }
	.sb-noticia-iglesias { padding: 16px; }
	.sb-noticia-iglesia-enl,
	.sb-ficha-noticia-enl { gap: 11px; padding: 8px; align-items: center; }
	.sb-noticia-iglesias .sb-noticia-iglesia-enl .sb-noticia-iglesia-img,
	.sb-ficha-noticias .sb-ficha-noticia-enl .sb-ficha-noticia-img { width: 60px; height: 60px; min-width: 60px; }
	.sb-noticia-iglesia-nom,
	.sb-ficha-noticia-tit { font-size: .93rem; }
}

/* ============================================================================
   FUENTES DE LA FICHA
   ----------------------------------------------------------------------------
   La lista de dónde salió cada dato. Va al pie y se pinta deliberadamente
   discreta: es la comprobación, no el contenido. Aun así tiene que ser legible
   y pulsable — una fuente que no se puede abrir no sirve de nada.
   ========================================================================== */
.sb-ficha-fuentes { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--sb-borde); }
.sb-ficha-fuentes h2 { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 1.15rem; margin: 0 0 10px; }
.sb-ficha-fuentes-intro { color: var(--sb-suave); font-size: .9rem; line-height: 1.55; margin: 0 0 16px; max-width: 62ch; }

/* Numerada: así se puede citar «la fuente 3» al corregir una ficha. */
.sb-ficha-fuentes-lista { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.sb-ficha-fuentes-lista li { color: var(--sb-tinta); font-size: .92rem; line-height: 1.5; }
.sb-ficha-fuentes-lista a { color: var(--sb-navy); text-decoration: underline; text-underline-offset: 2px; }
.sb-ficha-fuentes-lista a:hover,
.sb-ficha-fuentes-lista a:focus-visible { color: var(--sb-oro); }

/* La fecha de consulta, en su propia línea y más apagada: acompaña al enlace
   pero no compite con él. `break-word` porque algunas direcciones de Wikipedia
   son larguísimas y en móvil desbordarían la caja. */
.sb-ficha-fuente-fecha { display: block; color: var(--sb-suave); font-size: .82rem; margin-top: 2px; }
.sb-ficha-fuentes-lista li { overflow-wrap: break-word; }

/* ============================================================================
   AYUDA QUE REPARTE LA IGLESIA
   ----------------------------------------------------------------------------
   Comida, ropa, comedor social. Va la primera de la ficha y se pinta DESTACADA
   a propósito: para quien la necesita es el dato más importante de la página,
   y competir en gris con la historia del edificio sería un error de diseño con
   consecuencias reales.
   ========================================================================== */
.sb-ficha-ayuda { margin: 0 0 34px; padding: 20px 22px; border-radius: 14px; background: var(--sb-crema2); border: 1px solid var(--sb-oro2); }
.sb-ficha-ayuda > h2 { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 1.25rem; margin: 0 0 16px; }

.sb-ayuda-lista { display: grid; gap: 14px; }
.sb-ayuda-tarjeta { background: #fff; border: 1px solid var(--sb-borde); border-radius: 12px; padding: 16px 18px; }
.sb-ayuda-tipo { font-family: 'Literata', Georgia, serif; color: var(--sb-navy); font-size: 1.06rem; margin: 0 0 12px; }

/* Rótulo y valor en dos columnas: el rótulo estrecho y el dato con sitio.
   `auto` en la primera deja que «Qué hace falta» no parta en dos líneas. */
.sb-ayuda-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.sb-ayuda-datos dt { color: var(--sb-suave); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.sb-ayuda-datos dd { margin: 0; color: var(--sb-tinta); font-size: .96rem; line-height: 1.5; }

/* Los dos datos que la gente busca primero, resaltados. */
.sb-ayuda-dias,
.sb-ayuda-horario { font-weight: 600; color: var(--sb-navy) !important; }

.sb-ayuda-datos dd a { color: var(--sb-navy); text-decoration: underline; text-underline-offset: 2px; }
.sb-ayuda-datos dd a:hover { color: var(--sb-oro); }

.sb-ayuda-fuente { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--sb-borde); color: var(--sb-suave); font-size: .82rem; }
.sb-ayuda-fuente a { color: var(--sb-suave); }
.sb-ayuda-fecha { display: inline-block; margin-left: 6px; }

/* El aviso de confirmar por teléfono. No es letra pequeña decorativa: es lo
   que evita que alguien pierda un viaje, así que se lee. */
.sb-ayuda-aviso { margin: 16px 0 0; color: var(--sb-tinta); font-size: .88rem; line-height: 1.55; }

/* En móvil el rótulo se pone encima del dato: a 320 px dos columnas dejan el
   horario partido en tres líneas. */
@media (max-width: 520px) {
	.sb-ayuda-datos { grid-template-columns: 1fr; gap: 2px; }
	.sb-ayuda-datos dt { margin-top: 8px; }
	.sb-ficha-ayuda { padding: 16px; }
}