/*
   Biblioteca de Arantzazu - user.css
   Sistema de diseño propio (distinto al de la web de la Provincia),
   basado en la estructura de secciones de la plantilla T4/JA_Stark
   original, reconstruido sobre Cassiopeia.
*/

@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Karla:wght@400;500;600&display=swap');

:root {
	--bl-blue: #112855;
	--bl-blue-light: #224faa;
	--bl-ink: #1C1E22;
	--bl-ink-soft: #565B66;
	--bl-paper: #F5F4F1;
	--bl-paper-dark: #E7E5DF;
	--bl-black: #14161A;
	--bl-serif: 'Zilla Slab', Georgia, serif;
	--bl-sans: 'Karla', -apple-system, sans-serif;

	/* El header/menu de Cassiopeia tambien pasa a usar este mismo azul */
	--cassiopeia-color-primary: #112855;
	--cassiopeia-color-link: #224faa;
	--cassiopeia-color-hover: #0B1B3A;
}

/* ============ Base tipografica unificada (h1-h5, p) ============
   Aplica por defecto a cualquier titulo/parrafo suelto en el sitio.
   Las clases especificas (.bl-heading-lg, etc.) siguen ganando por
   tener mas especificidad, esto es solo la base coherente. */
.bl-section h1 {
	font-family: var(--bl-serif);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3rem);
	line-height: 1.15;
	color: var(--bl-ink);
	margin: 0 0 0.5em;
}
.bl-section h2 {
	font-family: var(--bl-serif);
	font-weight: 700;
	font-size: clamp(1.7rem, 3.5vw, 2.3rem);
	line-height: 1.2;
	color: var(--bl-ink);
	margin: 0 0 0.5em;
}
.bl-section h3 {
	font-family: var(--bl-serif);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	line-height: 1.25;
	color: var(--bl-ink);
	margin: 0.8em 0 0.4em;
}
.bl-section h4 {
	font-family: var(--bl-sans);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	line-height: 1.3;
	color: var(--bl-ink);
	margin: 0.6em 0 0.3em;
}
.bl-section h5 {
	font-family: var(--bl-sans);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bl-blue-light);
	margin: 0 0 0.5em;
}
.bl-section p {
	font-family: var(--bl-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--bl-ink);
	margin: 0 0 1em;
}
.bl-section small {
	font-size: 0.85rem;
	color: var(--bl-ink-soft);
}
.bl-section * { box-sizing: border-box; }
.bl-section {
	font-family: var(--bl-sans);
	color: var(--bl-ink);
	padding: 5rem 1.5rem;
}
.bl-section-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.bl-eyebrow {
	font-family: var(--bl-sans);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bl-blue-light);
}

.bl-heading-lg {
	font-family: var(--bl-serif);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.2;
	margin: 0 0 0.6em;
	color: var(--bl-ink);
}
.bl-heading-sm {
	font-family: var(--bl-sans);
	font-size: 1.05rem;
	color: var(--bl-ink-soft);
	margin: 0;
}

.bl-btn {
	display: inline-block;
	padding: 0.8rem 1.8rem;
	background: var(--bl-blue-light);
	color: #fff;
	text-decoration: none;
	font-family: var(--bl-sans);
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 2px;
	transition: background 0.2s ease;
}
.bl-btn:hover, .bl-btn:focus {
	background: #16346e;
	color: #fff;
}

/* ============ HERO (imagen de fondo) ============ */
.bl-hero {
	min-height: 82vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	padding: 4rem 1.5rem;
}
.bl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(17,40,85,0.88) 0%, rgba(17,40,85,0.55) 55%, rgba(17,40,85,0.25) 100%);
}
.bl-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 640px;
}
.bl-hero h1 {
	font-family: var(--bl-serif);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	margin: 0 0 0.5em;
	line-height: 1.1;
}
.bl-hero p {
	color: #E4E8F2;
	font-size: 1.15rem;
	margin: 0 0 1.6rem;
}

/* ============ Seccion azul de 2 columnas (historia / quienes somos) ============ */
/* La estructura de columnas ahora la resuelve el grid nativo de
   Bootstrap (row/col-md-*) directamente en el HTML del articulo;
   aqui solo quedan los estilos de color/tipografia. */
.bl-section--blue {
	background: var(--bl-blue);
	color: #fff;
}
.bl-section--blue .bl-eyebrow {
	color: #9FB3E0;
	font-size: 0.9rem;
}
.bl-section--blue .bl-heading-lg {
	color: #fff;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.bl-section--blue .bl-heading-sm {
	color: #C7D2EA;
	font-size: 1.05rem;
	margin-top: 1rem;
}
.bl-section--blue p { color: #C7D2EA; }

/* ============ Nuestros servicios (grid 6, sin efectos) ============ */
.bl-section--paper { background: var(--bl-paper); }

.bl-cols-93-reverse .bl-heading-lg {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}

.bl-service-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
}
.bl-service-icon img { width: 100%; height: 100%; }
.bl-service-item h3 {
	font-family: var(--bl-serif);
	font-size: 1.1rem;
	margin: 0 0 0.4rem;
	color: var(--bl-ink);
}
.bl-service-item p { color: var(--bl-ink-soft); font-size: 0.95rem; margin: 0; }

/* ============ Nuestro catalogo (grid 4 con imagen) ============ */
/* Toda la tarjeta es un enlace clicable, no solo el texto */
.bl-catalogo-item {
	display: block;
	text-align: center;
	text-decoration: none;
}
.bl-catalogo-img-wrap {
	max-width: 50%;
	margin: 0 auto 0.9rem;
	background: #fff;
}
/* El marco blanco tipo "polaroid" lo pone la propia clase de
   Bootstrap "img-thumbnail" en el HTML (borde + relleno + esquinas
   redondeadas, sin CSS propio que mantener). Aqui solo controlamos
   el encaje de la imagen dentro de ese marco. */
.bl-catalogo-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	display: block;
	transition: transform 1s ease;
}
/* Zoom suave de la foto al pasar el raton por la tarjeta */
.bl-catalogo-item:hover img,
.bl-catalogo-item:focus img {
	transform: scale(1.08);
}
.bl-catalogo-item span {
	display: block;
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-blue);
	font-size: 1.05rem;
	transition: color 0.2s ease;
}
.bl-catalogo-item:hover span,
.bl-catalogo-item:focus span {
	color: var(--bl-blue-light);
}
/* Aparicion escalonada al entrar en pantalla (aplicada a la columna
   de Bootstrap que envuelve cada tarjeta, ver HTML del articulo) */
.bl-catalogo-row > div:nth-child(1) .bl-reveal { transition-delay: 0ms; }
.bl-catalogo-row > div:nth-child(2) .bl-reveal { transition-delay: 100ms; }
.bl-catalogo-row > div:nth-child(3) .bl-reveal { transition-delay: 200ms; }
.bl-catalogo-row > div:nth-child(4) .bl-reveal { transition-delay: 300ms; }

.bl-catalogo-link-all {
	display: block;
	text-align: center;
	margin-top: 2.5rem;
	font-family: var(--bl-sans);
	font-weight: 600;
	color: var(--bl-blue-light);
	text-decoration: none;
}

/* ============ Nuestra mision (imagen + parallax) y Nuestro archivo
   (imagen, sin parallax) - misma base visual, distinto comportamiento
   de scroll segun lleven o no la clase "parallax-bg" ============ */
.bl-section--photo {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	color: #fff;
}
.bl-section--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(17,40,85,0.72);
}
.bl-section--photo .bl-section-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
}
.bl-section--photo .bl-heading-lg { color: #fff; }
.bl-section--photo p { color: #E4E8F2; }
.bl-section--photo hr { border-color: rgba(255,255,255,0.3); margin: 1.3rem 0; }

/* Parallax: el propio fondo se mueve con JS via background-position,
   asi que aqui solo dejamos preparado el position inicial */
.bl-section--photo.parallax-bg {
	background-position: center 0px;
}

/* Variante: tarjeta blanca a la derecha (col-9) en vez de texto
   blanco superpuesto directamente sobre la foto. La foto se ve en
   la franja izquierda que queda libre. */
.bl-section--photo-card {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	padding: 4rem 1.5rem;
}
.bl-section--photo-card.parallax-bg {
	background-position: center 0px;
}

/* Fondo fijo (la imagen no se mueve, la tarjeta blanca si se desliza
   por encima al hacer scroll). Se desactiva en pantallas pequeñas
   porque Safari de iPhone no lo soporta bien. */
.bl-section--photo-card.bl-bg-fixed {
	background-attachment: fixed;
}
@media (max-width: 780px) {
	.bl-section--photo-card.bl-bg-fixed {
		background-attachment: scroll;
	}
}
.bl-photo-card {
	position: relative;
	z-index: 2;
	background: #fff;
	color: var(--bl-ink);
	padding: 2.8rem 3rem;
	box-shadow: 0 20px 45px -20px rgba(0,0,0,0.35);
}
.bl-photo-card .bl-heading-lg { color: var(--bl-ink); }
.bl-photo-card p { color: var(--bl-ink-soft); }
.bl-photo-card hr { border-color: var(--bl-paper-dark); margin: 1.3rem 0; }
.bl-photo-card .bl-eyebrow { color: var(--bl-blue-light); }
@media (max-width: 780px) {
	.bl-photo-card { padding: 2rem; }
}
/* Variante: sin caja blanca, texto directamente sobre la foto con
   un velo azul (como estaba "Nuestro archivo" al principio), pero
   conservando el ancho/posicion tipo col-9 */
.bl-photo-card--overlay {
	background: rgba(17, 40, 85, 0.72);
	box-shadow: none;
}
.bl-photo-card--overlay .bl-heading-lg { color: #fff; }
.bl-photo-card--overlay p { color: #E4E8F2; }
.bl-photo-card--overlay .bl-eyebrow { color: #C7D2EA; }
.bl-photo-card--overlay hr { border-color: rgba(255,255,255,0.3); }

/* ============ Quienes somos (foto + texto, fondo azul) ============ */
.bl-cols-photo img {
	width: 100%;
	border-radius: 2px;
	display: block;
}
.bl-cols-photo p { line-height: 1.9; }

/* ============ Colofon (frase en fondo negro) ============ */
.bl-section--colofon {
	background: var(--bl-black);
	text-align: center;
	padding: 4.5rem 1.5rem;
}
.bl-section--colofon .bl-heading-lg {
	color: #fff;
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.bl-section--colofon a { color: #9FB3E0; }

/* ============ Pie de informacion (direccion / consulta / copyright) ============ */
/* Sin fondo propio: se deja ver el azul nativo del footer de
   Cassiopeia (misma variable --cassiopeia-color-primary que ya
   fijamos al principio), solo se ajustan los colores de texto para
   que queden legibles y coherentes con el resto del sitio. */
.bl-section--footer-info {
	color: #C7D2EA;
	padding: 3.5rem 1.5rem;
}
.bl-section--footer-info h3 {
	font-family: var(--bl-sans);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: #9FB3E0;
	margin: 0 0 0.8rem;
}
.bl-section--footer-info p {
	font-size: 0.92rem;
	line-height: 1.7;
	color: #C7D2EA;
	margin: 0;
}
.bl-section--footer-info a { color: #fff; text-decoration: underline; }
.bl-section--footer-info a:hover { color: #9FB3E0; }
@media (max-width: 780px) {
	.bl-section--footer-info .row > div { margin-bottom: 2rem; }
	.bl-section--footer-info .row > div:last-child { margin-bottom: 0; }
}

/* ============ Efectos de aparicion al hacer scroll ============ */
.bl-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.bl-reveal.bl-visible {
	opacity: 1;
	transform: translateY(0);
}
.bl-reveal-right {
	opacity: 0;
	transform: translateX(48px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.bl-reveal-right.bl-visible {
	opacity: 1;
	transform: translateX(0);
}
/* Aparicion cayendo desde arriba (texto de "Nuestro archivo") */
.bl-reveal-drop {
	opacity: 0;
	transform: translateY(-40px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.bl-reveal-drop.bl-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============ Cabecera de pagina interior (mas baja que el hero de portada) ============ */
.bl-hero--page {
	min-height: 38vh;
	padding: 3rem 1.5rem;
}
.bl-hero--page h1 {
	font-size: clamp(1.9rem, 5vw, 2.6rem);
}

/* ============ Secciones del catalogo (A / B / C / D) ============ */
.bl-catalog-section + .bl-catalog-section {
	margin-top: 4rem;
	padding-top: 4rem;
	border-top: 1px solid var(--bl-paper-dark);
}
.bl-catalog-section-head {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-bottom: 1.8rem;
}
.bl-catalog-letter {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--bl-blue);
	color: #fff;
	font-family: var(--bl-serif);
	font-weight: 700;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bl-catalog-section-head .bl-heading-lg {
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}
.bl-catalog-section > p { max-width: 760px; }

/* Subapartados numerados (2.1 / 2.2 dentro de un mismo bloque) */
.bl-catalog-subitem {
	margin-top: 1.6rem;
}
.bl-catalog-subitem h4 {
	font-family: var(--bl-serif);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--bl-ink);
	margin: 0 0 0.6rem;
}
.bl-catalog-subitem > p { margin-bottom: 1rem; max-width: 760px; }
.bl-catalog-subitem--nested {
	margin-left: 2.2rem;
	padding-left: 1.2rem;
	border-left: 2px solid var(--bl-paper-dark);
}

/* Tarjeta de recurso: miniatura + titulo enlazado + descripcion */
.bl-resource-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 1rem;
	text-decoration: none;
}
.bl-resource-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border: 1px solid var(--bl-paper-dark);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
}
.bl-resource-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.bl-resource-card-body .bl-resource-title {
	display: block;
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-blue);
	font-size: 1rem;
}
.bl-resource-card:hover .bl-resource-title,
.bl-resource-card:focus .bl-resource-title { color: var(--bl-blue-light); }
.bl-resource-card-body p {
	margin: 0.2rem 0 0;
	font-size: 0.92rem;
	color: var(--bl-ink-soft);
}

/* Grid de revistas destacadas (reutiliza el mismo estilo que el
   catalogo de portada: tarjeta clicable con zoom en la foto) */
.bl-revistas-grid {
	margin-top: 1.8rem;
}

/* Listado de nombres (Fondos personales): varias columnas de texto */
.bl-names-list {
	column-count: 3;
	column-gap: 2.2rem;
	margin-top: 1.8rem;
}
@media (max-width: 900px) {
	.bl-names-list { column-count: 2; }
}
@media (max-width: 600px) {
	.bl-names-list { column-count: 1; }
}
.bl-names-list p {
	break-inside: avoid;
	margin: 0 0 0.7rem;
	font-family: var(--bl-serif);
	font-size: 0.98rem;
	color: var(--bl-ink);
}
.bl-names-list a {
	color: var(--bl-blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.bl-names-list a:hover {
	color: var(--bl-blue-light);
	border-bottom-color: var(--bl-blue-light);
}

/* ============ Logo, menu y buscador en la misma linea (Cassiopeia estandar) ============ */
header.header.container-header.full-width {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.5rem 1.5rem !important;
}
header.header.container-header.full-width > .container-topbar,
header.header.container-header.full-width > .container-below-top {
	flex-basis: 100% !important;
}
header.header.container-header.full-width > .grid-child {
	flex-shrink: 0;
}
header.header.container-header.full-width > .grid-child.container-nav {
	flex-shrink: 1;
	flex-wrap: wrap;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.navbar-brand img {
	max-height: 2.8rem;
	width: auto;
}

/* ============ Pagina de archivo: listas de fondos ============ */
.bl-archive-list {
	margin-top: 1.2rem;
}
.bl-archive-item {
	padding: 0.8rem 0 0.8rem 1.1rem;
	border-left: 3px solid var(--bl-blue-light);
	margin-bottom: 0.7rem;
}
.bl-archive-item a {
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-blue);
	text-decoration: none;
	font-size: 1rem;
}
.bl-archive-item a:hover { color: var(--bl-blue-light); }
.bl-archive-item--plain {
	border-left-color: var(--bl-paper-dark);
}
.bl-archive-item--plain span {
	font-family: var(--bl-serif);
	font-weight: 600;
	color: var(--bl-ink-soft);
	font-size: 1rem;
}
.bl-archive-badge {
	display: inline-block;
	font-family: var(--bl-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.15rem 0.6rem;
	border-radius: 12px;
	margin-left: 0.7rem;
	vertical-align: middle;
}
.bl-archive-badge--done {
	background: var(--bl-blue-light);
	color: #fff;
}
.bl-archive-badge--soon {
	background: var(--bl-paper-dark);
	color: var(--bl-ink-soft);
}

/* ============ Imagen destacada del articulo (posicion izquierda) ============ */
/* Cubre varias variantes de clase segun como las genere Joomla:
   .item-image, img.item-image, con float-left o float-start. */
.item-image,
.float-left.item-image,
.float-start.item-image {
	margin: 0.2rem 1.8rem 1.2rem 0;
}
.item-image img,
img.item-image,
.float-left.item-image img,
.float-start.item-image img {
	padding: 0.3rem;
	background: #fff;
	border: 1px solid var(--bl-paper-dark);
	border-radius: 2px;
	box-shadow: 0 10px 22px -12px rgba(0,0,0,0.3);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.item-image img:hover,
img.item-image:hover {
	transform: scale(1.04) rotate(-1.5deg);
	box-shadow: 0 14px 28px -12px rgba(0,0,0,0.4);
}

/* ============ Pagina de contacto ============ */
.bl-contact-info h3 {
	font-family: var(--bl-sans);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--bl-blue-light);
	margin: 1.6rem 0 0.5rem;
}
.bl-contact-info h3:first-child { margin-top: 0; }
.bl-contact-info p { margin: 0; }
.bl-contact-info a {
	color: var(--bl-blue);
	text-decoration: underline;
}
.bl-contact-info a:hover { color: var(--bl-blue-light); }

/* Mapa (Leaflet + OpenStreetMap) */
.bl-map {
	width: 100%;
	height: 380px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 18px 40px -24px rgba(17,40,85,0.35);
}
.bl-map-data { display: none; }
.leaflet-popup-content-wrapper {
	background: #fff;
	border-radius: 2px;
	color: var(--bl-ink);
}
.leaflet-popup-content {
	font-family: var(--bl-sans);
	margin: 0.8rem 1rem;
}
.leaflet-popup-content strong {
	display: block;
	font-family: var(--bl-serif);
	font-size: 1rem;
	color: var(--bl-blue);
	margin-bottom: 0.2rem;
}
.leaflet-popup-tip { background: #fff; }

/* Formulario nativo de Joomla (com_contact), retocado para que
   combine con el resto del sitio. Los selectores son los que usa
   Joomla por defecto para el formulario de contacto. */
#contact-form .control-label,
#contact-form label {
	font-family: var(--bl-sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bl-ink);
}
#contact-form .form-control,
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
	font-family: var(--bl-sans);
	border: 1px solid var(--bl-paper-dark);
	border-radius: 2px;
	padding: 0.6rem 0.8rem;
}
#contact-form .form-control:focus {
	border-color: var(--bl-blue-light);
	box-shadow: 0 0 0 3px rgba(34,79,170,0.15);
}
#contact-form .btn,
#contact-form button[type="submit"] {
	background: var(--bl-blue-light);
	color: #fff;
	border: none;
	padding: 0.7rem 1.8rem;
	border-radius: 2px;
	font-family: var(--bl-sans);
	font-weight: 600;
}
#contact-form .btn:hover,
#contact-form button[type="submit"]:hover {
	background: #16346e;
}

@media (prefers-reduced-motion: reduce) {
	.bl-reveal, .bl-reveal-right, .bl-reveal-drop {
		opacity: 1;
		transform: none;
		transition: none;
	}
}