/* ============================================================
   01. PÁGINAS GENERALES — Ocultar títulos automáticos
   ============================================================ */
.page-id-8044 #page .entry-header {
	display: none;
}

.page-id-8046 #page .entry-header {
	display: none;
}

.page-id-2370 #page .entry-header {
	display: none;
}

.page-id-381 #page .entry-header {
	display: none;
}

.page-id-12456 #page .entry-header {
	display: none;
}

.page-id-8565 #page .entry-header {
	display: none;
}

/* ============================================================
   02. NAVEGACIÓN — Botón para volver arriba y desplazamiento
   ============================================================ */
.scroll-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #000;
	color: #fff;
	padding: 10px 15px;
	border-radius: 50%;
	text-decoration: none;
	font-size: 16px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 9999 !important;
}

.scroll-top:hover {
	background: #444 !important;
}

/* Flecha volver arriba: ampliación suave */
.scroll-top {
	transition: transform .25s ease-in-out !important;
	transform-origin: center center;
}

.scroll-top:hover {
	transform: scale(1.08) !important;
	background: #000 !important;
	color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

html {
	scroll-behavior: smooth;
}

/* ============================================================
   03. BLOG Y ENTRADAS — Ocultar metadatos, comentarios y navegación
   ============================================================ */
/* Ocultar la fecha de publicación */
.posted-on {
	display: none;
}

/* Ocultar la sección de etiquetas y categorías */
.posted-on,
.cat-links,
.tags-links,
.byline {
	display: none;
}

/* Ocultar la sección de comentarios */
#comments {
	display: none;
}

/* Ocultar la navegación entre entradas */
.nav-links {
	display: none;
}

/* Ocultar metadatos bajo el título (fecha, autor, categorías, etiquetas) */
.entry-meta,
.entry-footer,
.posted-on,
.byline,
.cat-links,
.tags-links,
.posted-by,
.author-info,
.author-description {
	display: none !important;
}

/* Ocultar la navegación entre entradas */
.nav-links,
.post-navigation {
	display: none !important;
}

/* Ocultar la sección de comentarios */
.comments-area,
#comments {
	display: none !important;
}

/* Ocultar cualquier otro bloque que contenga información del autor o publicación */
.wp-block-post-author,
.wp-block-post-date,
.wp-block-post-terms {
	display: none !important;
}

/* Ocultar la ubicación en las entradas */
.geolocation-chip {
	display: none !important;
}

/* Ocultar "Publicat per Oriol Bg" */
.author-heading {
	display: none !important;
}

/* ============================================================
   04. ELEMENTOS GRÁFICOS — Círculos de progreso
   ============================================================ */
.circle-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: auto;
}

.circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: conic-gradient(#000 0%, #bbb 0%);
	transition: background .5s ease;
/* Añadimos transición para un cambio suave */
}

/* ============================================================
   05. PÁGINA ESPECIAL 7066 — Ocultar cabecera y título
   ============================================================ */
.page-id-7066 #masthead {
	display: none;
}

.page-id-7066 #page .entry-header {
	display: none;
}

/* ============================================================
   06. BARZELONA — Versiones catalana y castellana
   Ajustes de portada, tipografía, móviles y tabletas.
   Se conserva la secuencia de reglas para respetar prioridades.
   ============================================================ */
/* ========================================
   BARZELONA - CATALÀ + ESPAÑOL
   Páginas 15680 y 15814
   ======================================== */
/* 1. OCULTAR CABECERA Y MENÚ */
body:is(.page-id-15680, .page-id-15814) .site-header,
body:is(.page-id-15680, .page-id-15814) #masthead {
	display: none !important;
}

/* 2. OCULTAR TÍTULO AUTOMÁTICO */
body:is(.page-id-15680, .page-id-15814) .entry-header,
body:is(.page-id-15680, .page-id-15814) .entry-title,
body:is(.page-id-15680, .page-id-15814) .wp-block-post-title {
	display: none !important;
}

/* 3. ELIMINAR ESPACIO SUPERIOR */
body:is(.page-id-15680, .page-id-15814) #content,
body:is(.page-id-15680, .page-id-15814) .site-content,
body:is(.page-id-15680, .page-id-15814) .content-area,
body:is(.page-id-15680, .page-id-15814) .entry-content,
body:is(.page-id-15680, .page-id-15814) main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* 4. ELIMINAR MARGEN DEL PRIMER BLOQUE */
body:is(.page-id-15680, .page-id-15814)
.entry-content > :first-child {
	margin-top: 0 !important;
}

/* 5. IMAGEN DE PORTADA FIJA */
body:is(.page-id-15680, .page-id-15814)
.barzelona-parallax {
	background-attachment: fixed !important;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	min-height: 100vh;
}

/* 6. LOGOTIPO SUPERPUESTO */
body:is(.page-id-15680, .page-id-15814)
.barzelona-parallax .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* 7. ADAPTACIÓN MÓVIL */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-parallax {
		min-height: 100svh;
		background-attachment: scroll !important;
	}
}

/* ==========================================
   BARZELONA - FONDO FIJO Y PORTADA
   Catalán + Español
   ========================================== */
/* Portada */
body:is(.page-id-15680, .page-id-15814)
.barzelona-parallax {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

/* Imagen de fondo de la cubierta */
body:is(.page-id-15680, .page-id-15814)
.barzelona-parallax
.wp-block-cover__image-background {
	position: absolute !important;
	width: 100% !important;
	height: 100% !important;
	background-attachment: fixed !important;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	z-index: 0 !important;
}

/* Mantener el logotipo encima */
body:is(.page-id-15680, .page-id-15814)
.barzelona-parallax
.wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Móviles */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-parallax
																			    .wp-block-cover__image-background {
		background-attachment: scroll !important;
	}
}

/* ==========================================
   BARZELONA - FONDO GENERAL FIJO
   Catalán + Español
   ========================================== */
body:is(.page-id-15680, .page-id-15814) {
	background-image: url('https://oriolbg.com/wp-content/uploads/2026/11/fondo_barzelona-optimizado-1.webp') !important;
	background-position: center center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
}

@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814) {
		background-attachment: scroll !important;
	}
}

/* ==========================================
   BARZELONA - OPTIMIZACIÓN MÓVIL
   Catalán + Español
   ========================================== */
@media (max-width: 767px) {
	/* 1. Evitar desbordamiento horizontal */
	body:is(.page-id-15680, .page-id-15814) {
		overflow-x: clip;
	}
	
	/* 2. Reducir tamaño de títulos */
	body:is(.page-id-15680, .page-id-15814)
																			    .entry-content h1 {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .entry-content h2 {
		font-size: 25px !important;
		line-height: 1.3 !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .entry-content h3 {
		font-size: 21px !important;
		line-height: 1.3 !important;
	}
	
	/* 3. Texto más cómodo de leer */
	body:is(.page-id-15680, .page-id-15814)
																			    .entry-content p {
		font-size: 16px !important;
		line-height: 1.65 !important;
	}
	
	/* 5. Imágenes adaptables */
	body:is(.page-id-15680, .page-id-15814)
																			    .entry-content img {
		max-width: 100%;
		height: auto;
	}
	
	/* 6. Vídeos adaptables */
	body:is(.page-id-15680, .page-id-15814)
																			    .wp-block-video video {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	
	/* 7. Reducir espacios excesivos */
	body:is(.page-id-15680, .page-id-15814)
																			    .wp-block-spacer {
		max-height: 50px;
	}
	
	/* 8. Portada ajustada al móvil */
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-parallax {
		min-height: 65svh;
	}
}

/* ==========================================
   BARZELONA - COLUMNAS EN MÓVIL
   Catalán + Español
   ========================================== */
@media (max-width: 767px) {
	/* Mantener columnas en horizontal */
	body:is(.page-id-15680, .page-id-15814)
																			    .wp-block-columns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 12px !important;
	}
	
	/* Distribuir el espacio entre columnas */
	body:is(.page-id-15680, .page-id-15814)
																			    .wp-block-columns > .wp-block-column {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
	}
	
	/* Imágenes adaptadas a su columna */
	body:is(.page-id-15680, .page-id-15814)
																			    .wp-block-column img {
		display: block;
		max-width: 100%;
		height: auto;
	}
}

/* BARZELONA - Alineación de banderas en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 20px !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas > .wp-block-column {
		flex: 0 1 90px !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas figure {
		margin: 0 !important;
		line-height: 0 !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas img {
		display: block !important;
		width: 70px !important;
		height: 70px !important;
		object-fit: contain !important;
	}
}

/* BARZELONA - Alineación vertical de banderas */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas > .wp-block-column {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas figure,
																			    body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas .wp-block-image {
		margin: 0 !important;
		padding: 0 !important;
	}
}

/* BARZELONA - Efecto hover en banderas */
body:is(.page-id-15680, .page-id-15814)
.barzelona-idiomas img {
	transition: transform .25s ease-in-out;
	transform-origin: center center;
}

/* Ampliación al pasar el cursor */
@media (hover: hover) and (pointer: fine) {
	body:is(.page-id-15680, .page-id-15814)
																			    .barzelona-idiomas a:hover img {
		transform: scale(1.12);
	}
}

/* BARZELONA - Foto y sinopsis apiladas en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																		    .barzelona-sinopsis {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 20px !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																		    .barzelona-sinopsis > .wp-block-column {
		width: 100% !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
	}
	
	body:is(.page-id-15680, .page-id-15814)
																		    .barzelona-sinopsis img {
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* BARZELONA - Ajustes para móvil */
@media (max-width: 767px) {
	/* Título principal más grande */
	body:is(.page-id-15680, .page-id-15814)
																	    .entry-content h1 {
		font-size: 42px !important;
		line-height: 1.1 !important;
	}
	
	/* Menú del footer más pequeño */
	body:is(.page-id-15680, .page-id-15814)
																	    footer a {
		font-size: 12px !important;
	}
	
	/* Reducir separación entre enlaces del menú */
	body:is(.page-id-15680, .page-id-15814)
																	    footer .wp-block-navigation__container {
		gap: 10px !important;
	}
}

/* BARZELONA - Logotipo XL en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																	    .barzelona-logo {
		width: 125% !important;
		max-width: none !important;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	
	body:is(.page-id-15680, .page-id-15814)
																	    .barzelona-logo img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
	}
}

/* BARZELONA - Banderas más pequeñas en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																    .barzelona-idiomas img {
		width: 50px !important;
		height: 50px !important;
		object-fit: contain !important;
	}
}

/* ==========================================
   BARZELONA - RESPETAR ESPACIADORES EN MÓVIL
   ========================================== */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																    .wp-block-spacer {
		max-height: none !important;
	}
}

/* BARZELONA - Espacio bajo el logotipo en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																    .barzelona-logo {
		margin-bottom: 200px !important;
	}
}

/* BARZELONA - Bajar el contenido de portada en móvil */
@media (max-width: 767px) {
	body:is(.page-id-15680, .page-id-15814)
																    .barzelona-parallax .wp-block-cover__inner-container {
		transform: translateY(70px);
	}
}

/* BARZELONA - Fondo adaptado para iPad */
@media (min-width: 768px) and (pointer: coarse) {
	/* Fondo general */
	body:is(.page-id-15680, .page-id-15814) {
		background-attachment: scroll !important;
		background-size: contain !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
	
	/* Fondo de la portada */
	body:is(.page-id-15680, .page-id-15814)
															    .barzelona-parallax,
															    body:is(.page-id-15680, .page-id-15814)
															    .barzelona-parallax .wp-block-cover__image-background {
		background-attachment: scroll !important;
		background-size: contain !important;
		background-position: center center !important;
	}
}

/* BARZELONA - Ajuste vertical del fondo en iPad */
@media (min-width: 768px) and (pointer: coarse) {
	body:is(.page-id-15680, .page-id-15814)
															    .barzelona-parallax,
															    body:is(.page-id-15680, .page-id-15814)
															    .barzelona-parallax .wp-block-cover__image-background {
		background-size: cover !important;
		background-position: center center !important;
		background-attachment: scroll !important;
	}
}

/* BARZELONA - Margen derecho de la sinopsis en iPad */
@media (min-width: 768px) and (pointer: coarse) {
	body:is(.page-id-15680, .page-id-15814)
															    .barzelona-sinopsis {
		padding-right: 35px !important;
		box-sizing: border-box !important;
	}
}

/* ============================================================
   07. PORTAFOLIO — Ampliación suave de logotipos
   ============================================================ */
/* Ampliación de los logos al pasar el cursor */
.logos-projectes img {
	transition: transform .25s ease-in-out;
	transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) {
	.logos-projectes:hover img {
		transform: scale(1.05);
	}
}

/* ============================================================
   08. CABECERA — Sustitución del icono de Twitter por X
   ============================================================ */
/* Shawburn: logotipo original de X */
.social-navigation a[href*="twitter.com"],
.social-navigation a[href*="x.com/"] {
	position: relative !important;
}

.social-navigation a[href*="twitter.com"]::before,
.social-navigation a[href*="x.com/"]::before {
	content: none !important;
}

.social-navigation a[href*="twitter.com"] svg,
.social-navigation a[href*="x.com/"] svg {
	display: none !important;
}

.social-navigation a[href*="twitter.com"]::after,
.social-navigation a[href*="x.com/"]::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 18px !important;
	height: 18px !important;
	background: url('https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/x.svg') center / contain no-repeat !important;
	filter: invert(1);
}

/* ============================================================
   09. BLOG — Ocultar enlace «Continua llegint»
   ============================================================ */
/* Ocultar "Continua llegint" en el blog */
.blog .more-link,
.blog .read-more {
	display: none !important;
}

/* ============================================================
   10. BLOG — Etiquetes amb estil de botons
   ============================================================ */
/* Distribució de les etiquetes */
.etiquetes-blog {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

/* Estil dels botons */
.etiquetes-blog a {
	display: inline-block !important;
	margin: 0 !important;
	padding: 5px 10px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	color: #333 !important;
	background: transparent !important;
	border: 1px solid #bbb !important;
	border-radius: 20px !important;
	box-shadow: none !important;
}

/* Efecte en passar el cursor */
.etiquetes-blog a:hover {
	background: #f2f2f2 !important;
	border-color: #777 !important;
}

/* ============================================================
   11. BLOG — Centrar el botó «Carrega més articles»
   ============================================================ */
/* Centrar el botó sota el llistat d'articles */
.wp-block-newspack-blocks-homepage-articles > button {
	display: block !important;
	width: fit-content;
	max-width: 100%;
	margin: 24px auto 0 !important;
}

/* ============================================================
   12. BLOG — Botó «Torna al blog»
   ============================================================ */
/* Ocultar el botó a totes les pàgines */
body .tornar-blog {
	display: none !important;
}

/* Mostrar-lo només a categories i etiquetes */
body.category .tornar-blog,
body.tag .tornar-blog {
	display: block !important;
}

/* Centrar el botó */
.tornar-blog {
	width: 100% !important;
	margin: 24px auto !important;
	text-align: center !important;
}

/* Estil del botó */
.tornar-blog a {
	display: inline-block !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	color: #fff !important;
	background: #000 !important;
	border: 1px solid #000 !important;
	border-radius: 20px !important;
	transition: all .2s ease;
}

/* Efecte en passar el cursor */
.tornar-blog a:hover {
	background: #333 !important;
	border-color: #333 !important;
}

/* ============================================================
   13. BLOG — Ocultar extractes en categories i etiquetes
   ============================================================ */
/* Ocultar el text dels articles als arxius */
body.category article .entry-content,
body.category article .entry-summary,
body.tag article .entry-content,
body.tag article .entry-summary {
	display: none !important;
}

/* ============================================================
   CAPÇALERA — Mida del logotip
   ============================================================ */
img.custom-logo {
	width: 200px !important;
	height: 200px !important;
	max-width: 100% !important;
	object-fit: contain;
}

@media (max-width: 767px) {
	img.custom-logo {
		width: 120px !important;
		height: 120px !important;
	}
}