MODIF backend segundo idioma

assets/scripts/site.js

@@ -1,5 +1,32 @@
-jQuery( document ).ready( function( $ ) {
+document.addEventListener('DOMContentLoaded', function() {
 
-  // Your JavaScript goes here
+    // modal videos
+    const videoModal = document.getElementById('videoModal');
+    const modalIframe = document.getElementById('modalVideoIframe');
+    const modalTitle = document.getElementById('videoModalLabel');
     
-});
+    if ( videoModal || modalIframe || modalTitle ) {
+      // when modal open...
+      videoModal.addEventListener('show.bs.modal', function (event) {
+          const button = event.relatedTarget;
+          const videoUrl = button.getAttribute('data-video-url');
+          const videoTitle = button.getAttribute('data-video-title');
+          const videoAllow = button.getAttribute('data-video-allow');
+          
+          // Add autoplay to URL
+          const separator = videoUrl.includes('?') ? '&' : '?';
+          const autoplayUrl = videoUrl + separator + 'autoplay=1';
+          
+          modalIframe.src = autoplayUrl;
+          modalIframe.title = videoTitle;
+          modalIframe.allow = videoAllow;
+          modalTitle.textContent = videoTitle;
+      });
+      
+      // When modal close, video stops.
+      videoModal.addEventListener('hide.bs.modal', function () {
+          modalIframe.src = '';
+      });
+    }
+
+}); //end DMContentLoaded

functions.php

@@ -13,7 +13,6 @@ use Timber\Timber;
 
 // Load Composer dependencies.
 require_once __DIR__ . '/vendor/autoload.php';
-
 Timber::init();
 
 new StarterSite();

page.php

@@ -14,9 +14,21 @@ $context = Timber::context();
 Timber::render( 'templates/page.twig', $context );*/
 
 $context = Timber::context();
-
 $timber_post     = Timber::get_post();
 $context['post'] = $timber_post;
+$context['search_query'] = get_search_query();
+
 //Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
 
-Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig' ), $context );
+// Verificar si es subpágina de contactos
+$parent = get_post($timber_post->post_parent);
+if ($parent && $parent->post_name === 'contactos' || $parent->post_name === 'kontaktua' ) {
+    // Para subpáginas de contactos, usar page-contactos.twig
+    Timber::render('templates/page-contactos.twig', $context);
+} elseif ($parent && $parent->post_name === 'servicios-privados' || $parent && $parent->post_name === 'servicios-publicos') {
+    // Para subpáginas de servicios privados, usar page-servicio-individual.twig
+    Timber::render('templates/single-servicios.twig', $context);
+} else {
+    // Para el resto, usar la lógica original
+    Timber::render(array('templates/page-' . $timber_post->post_name . '.twig'), $context);
+}

search.php

@@ -9,10 +9,6 @@ use Timber\Timber;
 
 $templates = [ 'templates/search.twig', 'templates/archive.twig', 'templates/index.twig' ];
 
-$context = Timber::context(
+$context = Timber::context([]);
-	[
-		'title' => 'Search results for ' . get_search_query(),
-	]
-);
 
 Timber::render( $templates, $context );

src/StarterSite.php

@@ -31,9 +31,17 @@ class StarterSite extends Site {
 		
         add_filter('upload_mimes', [$this, 'add_svg_support']); //add svg files
         add_filter('timber/context', [$this, 'add_global_context']); // variables globales
-		//add_filter('timber/twig', [$this, 'add_youtube_function_to_twig']);
+		add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']); //videos embed
-		add_filter('timber/twig', [$this, 'add_videos_embed_to_twig']);
+		add_action('pre_get_posts', array($this, 'exclude_pages_from_search')); //exclude pages with ACF
 
+		add_action('init', function() {
+			if (function_exists('pll_current_language')) {
+				// Forzar que ACF reconozca el idioma actual
+				add_filter('acf/settings/current_language', function() {
+					return pll_current_language();
+				});
+			}
+		});
 
 		parent::__construct();
 	}
@@ -48,9 +56,9 @@ class StarterSite extends Site {
          wp_enqueue_style( 'twbsi', get_template_directory_uri() . '/vendor/twbs/bootstrap-icons/font/bootstrap-icons.min.css', [], $version, 'all');
          wp_enqueue_style( 'lust', get_template_directory_uri() . '/style.css', [], $version, 'all');
 
-         //~ wp_enqueue_script( 'pop', get_template_directory_uri() . '/static/popper.min.js', [], $version, false);
+         // wp_enqueue_script( 'pop', get_template_directory_uri() . '/static/popper.min.js', [], $version, false);
          wp_enqueue_script( 'twbs', get_template_directory_uri() . '/vendor/twbs/bootstrap/dist/js/bootstrap.min.js', [], $version, false);
-         //wp_enqueue_script( 'lust', get_template_directory_uri() . '/static/site.js', [], $version, false);
+         wp_enqueue_script( 'lust', get_template_directory_uri() . '/assets/scripts/site.js', [], $version, false);
     }
 
 
@@ -192,6 +200,11 @@ class StarterSite extends Site {
 		return $options;
 	}
 
+	/**
+	 * New functions to add Sindikatua theme
+	 * @author Gustavo
+	 */
+
 	//add svg files
 	public function add_svg_support($file_types) {
         $new_filetypes = array();
@@ -200,13 +213,23 @@ class StarterSite extends Site {
         return $file_types;
     }
 
-	//section "portada"
+	//section "portada> ENLACES"
-	private function getBotonesImagen() {
+	private function getBotonesImagen($page_id = null) {
+
+		if (is_null($page_id)) {
+			$page_id = get_the_ID();
+			// Si estamos en euskera, obtener la página en español
+			if (pll_current_language() == 'eu') {
+				$spanish_page_id = pll_get_post($page_id, 'es');
+				$page_id = $spanish_page_id ?: $page_id;
+			}
+		}
+
 		$botones = [];
 		
 		for ($i = 1; $i <= 4; $i++) {
-			$imagen = get_field('imagen_boton_' . $i);
+			$imagen = get_field('imagen_boton_' . $i, $page_id);
-			$enlace = get_field('enlace_boton_' . $i);
+			$enlace = get_field('enlace_boton_' . $i, $page_id);
 		
 			$botones[] = [
 				'imagen' => $imagen,
@@ -221,7 +244,7 @@ class StarterSite extends Site {
 	private function recentPostsNews() {
 		return Timber::get_posts([
 			'post_type' => 'post',
-			'posts_per_page' => 3,
+			'posts_per_page' => -1,
 			'category_name' => 'noticias',
 			'post_status' => 'publish'
 		]);
@@ -229,6 +252,7 @@ class StarterSite extends Site {
 
 	private function getIconsRRSS() {
 		$icons_rrss = [];
+
 		for ($i = 1; $i <= 4; $i++) {
 			$img = get_field('rrss_img_' . $i, 'option');
 			$url = get_field('rrss_url_' . $i, 'option');
@@ -260,13 +284,12 @@ class StarterSite extends Site {
 		}
 		
 		return $logos;
-		
 	}
 
-	private function getVideosCarousel($cantidad = 2) {
+	private function getVideos() {
 		return Timber::get_posts([
 			'post_type' => 'videos',
-			'posts_per_page' => $cantidad,
+			'posts_per_page' => -1, // -1 = sin límite
 			'post_status' => 'publish',
 			'orderby' => 'date',
 			'order' => 'DESC'
@@ -281,19 +304,60 @@ class StarterSite extends Site {
 			'orderby' => 'date',
 			'order' => 'DESC'
 		]);
+
+		// $current_lang = pll_current_language();
+    
+		// // Consulta con filtro de idioma
+		// $posts = Timber::get_posts([
+		// 	'post_type' => 'opinion',
+		// 	'posts_per_page' => 1,
+		// 	'post_status' => 'publish',
+		// 	'orderby' => 'date',
+		// 	'order' => 'DESC',
+		// 	'lang' => $current_lang  // ← Filtro por idioma
+		// ]);
+		
+		// // Debug temporal - quítalo después
+		// $debug_all = Timber::get_posts([
+		// 	'post_type' => 'opinion',
+		// 	'posts_per_page' => -1,
+		// 	'post_status' => 'publish'
+		// ]);
+		
+		// $debug_spanish = Timber::get_posts([
+		// 	'post_type' => 'opinion',
+		// 	'posts_per_page' => -1,
+		// 	'post_status' => 'publish',
+		// 	'lang' => 'es'
+		// ]);
+		
+		// $debug_euskera = Timber::get_posts([
+		// 	'post_type' => 'opinion',
+		// 	'posts_per_page' => -1,
+		// 	'post_status' => 'publish',
+		// 	'lang' => 'eu'
+		// ]);
+		
+		// // Logging temporal
+		// error_log("=== DEBUG ARTICULOS OPINION ===");
+		// error_log("Idioma actual: " . $current_lang);
+		// error_log("Total artículos opinion: " . count($debug_all));
+		// error_log("Artículos en español: " . count($debug_spanish));
+		// error_log("Artículos en euskera: " . count($debug_euskera));
+		// error_log("Resultado consulta actual: " . count($posts));
+		
+		// return $posts;
 	}
 
-	// Añadir en functions.php si no la tienes ya
+	private function getCampanaArticles() {
-	// private function obtener_youtube_id($url) {
+		return Timber::get_posts([
-	// 	$pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/';
+			'post_type' => 'campana',
-	// 	preg_match($pattern, $url, $matches);
+			'posts_per_page' => 1,
-	// 	return isset($matches[1]) ? $matches[1] : false;
+			'post_status' => 'publish',
-	// }
+			'orderby' => 'date',
-
+			'order' => 'DESC'
-	// public function add_youtube_function_to_twig($twig) {
+		]);
-	// 	$twig->addFunction(new \Twig\TwigFunction('youtube_id', [$this, 'obtener_youtube_id']));
+	}
-	// 	return $twig;
-	// }
 
 	public function generar_embed_universal($url) {
 		if (empty($url)) {
@@ -309,7 +373,8 @@ class StarterSite extends Site {
 				$embed_data = [
 					'platform' => 'youtube',
 					'embed_url' => 'https://www.youtube.com/embed/' . $matches[1] . '?rel=0&modestbranding=1',
-					'allow' => 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+					'thumbnail_url' => 'https://img.youtube.com/vi/' . $matches[1]. '/hqdefault.jpg',
+					'allow' => 'autoplay; encrypted-media; picture-in-picture'
 				];
 				
 				//error_log('Embed URL generada: ' . $embed_data['embed_url']);
@@ -341,22 +406,326 @@ class StarterSite extends Site {
 
 	// Hacer función disponible en Twig
 	public function add_videos_embed_to_twig ($twig) {
-		error_log('Añadiendo función generar_embed a Twig'); // Debug
+		//error_log('Añadiendo función generar_embed a Twig'); // Debug
 		$twig->addFunction(new \Twig\TwigFunction('generar_embed', [$this, 'generar_embed_universal']));
 		return $twig;
 	}
 
+	private function getPaginasAcerca() {
+			return Timber::get_posts([
+			'post_type'      => 'acerca',
+			'post_status'    => 'publish',
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
+			'posts_per_page' => -1,	
+		]);
+	}
+
+	//Obtiene los "Documentos"
+	private function getDocumentos() {
+
+		$args = ([
+			'post_type'      => 'documento',
+			'post_status'    => 'publish',
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
+			'posts_per_page' => -1,
+			'lang'           => '',
+		]);
+
+		//error_log('✅ Número de posts "Documentos" encontrados: ' . count($posts));
+		$posts = Timber::get_posts($args);
+
+		$documentos = [];
+
+		foreach ($posts as $post) {
+			$doc = [
+				'id'    	=> $post->ID,
+				'title' 	=> $post->title,
+				'link'  	=> $post->link,
+				'content' 	=> $post->content,
+				'excerpt' 	=> $post->excerpt,
+				'lang'   	=> pll_get_post_language($post->ID),
+			];
+
+			$archivo = get_field('documento', $post->ID);
+
+			if ($archivo && is_array($archivo)) {
+				$doc['documento_url']      = $archivo['url'] ?? '';
+				$doc['documento_filename'] = $archivo['filename'] ?? '';
+				$doc['documento_filesize'] = size_format($archivo['filesize'] ?? 0);
+				$doc['documento_extension'] = pathinfo($archivo['filename'] ?? '', PATHINFO_EXTENSION);
+				$doc['thumbnail'] = get_the_post_thumbnail_url($post->ID, 'medium');
+			}
+
+			$documentos[] = $doc;
+		}
+
+		return $documentos;
+	}
+
+	/** Obetiene campos de "Enlaces" */
+	private function getEnlaces() {
+		$grupos = [];
+
+		// Buscar página por su slug & Cambia dinámicamente según idioma
+		$page = get_page_by_path( pll_current_language() === 'eu' ? 'loturak' : 'enlaces' );
+		//error_log('✅ Página "enlaces" encontrada con ID: ' . $page->ID);
+
+
+		if (!$page) {
+			error_log('🔴 Página "enlaces" no encontrada con get_page_by_path().');
+			return [];
+		}
+
+		if (!have_rows('grupos_enlaces', $page->ID)) {
+			error_log('🔴 Array vacío');
+			return [];
+		} else {
+			//error_log('✅ "grupos_enlaces" tiene filas.');
+		}
+
+		// Si se encuentra la página y el campo tiene filas
+		if ($page && have_rows('grupos_enlaces', $page->ID)) {
+	
+			$field = get_field('grupos_enlaces', $page->ID);
+			//error_log('📦 Contenido de get_field: ' . print_r($field, true));
+
+			while (have_rows('grupos_enlaces', $page->ID)) {
+				the_row();
+
+				$grupo = [
+					'titulo' => get_sub_field('titulo_grupo'),
+					'enlaces' => []
+				];
+
+				// Recorrer enlaces dentro del grupo
+				if (have_rows('enlaces')) {
+					while (have_rows('enlaces')) {
+						the_row();
+
+						$titulo_enlace = get_sub_field('titulo_enlace');
+						$url_enlace = get_sub_field('url_enlace');
+
+						if (!empty($titulo_enlace) && !empty($url_enlace)) {
+							$enlace = [
+								'titulo' => $titulo_enlace,
+								'url' => $url_enlace,
+								'target' => get_sub_field('target_enlace') ?: '_self'
+							];
+
+							$grupo['enlaces'][] = $enlace;
+						}
+					}
+				}
+
+				// Añadir grupo solo si tiene título y enlaces válidos
+				if (!empty($grupo['titulo']) && !empty($grupo['enlaces'])) {
+					$grupos[] = $grupo;
+				}
+			}
+		}
+
+		return $grupos;
+	}
+
+	// Get subpages of "servicios publicos"
+	private function getPaginasServiciosPublicos() {
+		
+		$pag_servicios_publicos = get_page_by_path('accion-sindical/servicios-publicos');
+
+		if (!$pag_servicios_publicos) {
+			error_log('🔴 Página "Servicios públicos" no encontrada.');
+			return [];
+		} else {
+			//error_log('✅ Página "Servicios públicos" encontrada.');
+		}
+
+		$subpaginas = Timber::get_posts([
+			'post_type'      => 'page',
+			'post_status'    => 'publish',
+			'post_parent'    => $pag_servicios_publicos->ID,
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
+			'posts_per_page' => -1,
+		]);
+
+		foreach ($subpaginas as $pagina) {
+			//$pagina->imagen = $pagina->thumbnail ? $pagina->thumbnail->src('medium') : null;
+			$pagina->thumbnail= get_the_post_thumbnail_url($pagina->ID);
+		}
+
+		return $subpaginas;
+	}
+
+	// Get subpages of "servicios privados"
+	private function getPaginasServiciosPrivados() {
+		
+		$pag_servicios_privados = get_page_by_path('accion-sindical/servicios-privados');
+
+		if (!$pag_servicios_privados) {
+			error_log('🔴 Página "Servicios privados" no encontrada.');
+			return [];
+		} else {
+			//error_log('✅ Página "Servicios privados" encontrada.');
+		}
+
+		$subpaginas = Timber::get_posts([
+			'post_type'      => 'page',
+			'post_status'    => 'publish',
+			'post_parent'    => $pag_servicios_privados->ID,
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
+			'posts_per_page' => -1,
+		]);
+
+		foreach ($subpaginas as $pagina) {
+			//$pagina->imagen = $pagina->thumbnail ? $pagina->thumbnail->src('medium') : null;
+			$pagina->thumbnail= get_the_post_thumbnail_url($pagina->ID);
+		}
+
+		return $subpaginas;
+	}
+
+	private function getSubpaginasServicios() {
+		// Detectar automáticamente si es servicios públicos o privados
+		$current_post = get_post();
+		$slug_actual = $current_post->post_name;
+		
+		// Determinar qué página padre buscar según el slug actual
+		if ($slug_actual === 'servicios-publicos') {
+			$path = 'accion-sindical/servicios-publicos';
+			$tipo = 'publicos';
+		} elseif ($slug_actual === 'servicios-privados') {
+			$path = 'accion-sindical/servicios-privados';
+			$tipo = 'privados';
+		} else {
+			return [];
+		}
+		
+		$pag_servicios = get_page_by_path($path);
+		if (!$pag_servicios) {
+			error_log("🔴 Página '$path' no encontrada.");
+			return [];
+		}
+		
+		$subpaginas = Timber::get_posts([
+			'post_type'      => 'page',
+			'post_status'    => 'publish',
+			'post_parent'    => $pag_servicios->ID,
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
+			'posts_per_page' => -1,
+		]);
+		
+		foreach ($subpaginas as $pagina) {
+			$pagina->thumbnail = get_the_post_thumbnail_url($pagina->ID);
+			$pagina->tipo_servicio = $tipo; // Para usar en la plantilla si necesitas distinguir
+		}
+		
+		return $subpaginas;
+	}
+
+	//Campos de contactos
+	public function getContactoFields() {
+		$post = Timber::get_post();
+
+		if (!$post) {
+			error_log('🔴 No hay páginas de contactos.');
+			return []; // devolver un array vacío para evitar el error
+		}
+
+		$form_shortcode = get_field('etiqueta_formulario', $post->ID); // o el campo ACF donde esté el shortcode
+		//error_log('✅ ID Página "Contactos": ' . $post->ID);
+
+
+		$contactsFields = [
+			'nombre' => get_field('nombre_contacto', $post->ID),
+			'direccion' => get_field('direccion', $post->ID),
+			'url_mapa' => get_field('url_mapa', $post->ID),
+			'forma_contacto' => get_field('forma_contacto', $post->ID),
+			'url_web' => get_field('url_web', $post->ID),
+			'url_facebook' => get_field('url_facebook', $post->ID),
+			'url_twitter' => get_field('url_twitter', $post->ID),
+			'form' => !empty($form_shortcode) ? do_shortcode($form_shortcode) : '',
+		];
+
+		return $contactsFields;
+		
+	}
+
+	// Excluir páginas de la búsqueda
+	public function exclude_pages_from_search($query) {
+        if (!is_admin() && $query->is_main_query() && $query->is_search()) {
+            $query->set('meta_query', array(
+                'relation' => 'OR',
+                array(
+                    'key' => 'exclude_from_search',
+                    'compare' => 'NOT EXISTS'
+                ),
+                array(
+                    'key' => 'exclude_from_search',
+                    'value' => '1',
+                    'compare' => '!='
+                )
+            ));
+        }
+    }
+
+	// Añadir idiomas de Polylang
+	private function getPolylangData() {
+		$polylang_data = array();
+		
+		if (function_exists('pll_the_languages')) {
+			// Idiomas con toda la información
+			$polylang_data['languages'] = pll_the_languages(array(
+				'raw' => 1,
+				'hide_if_no_translation' => 0,
+				'show_flags' => 1,
+				'show_names' => 1
+			));
+			
+			// Información del idioma actual
+			$polylang_data['current_language'] = pll_current_language();
+			$polylang_data['current_language_name'] = pll_current_language('name');
+			$polylang_data['default_language'] = pll_default_language();
+
+			// DEBUG: Escribir en el log de errores
+			//error_log('Languages: ' . print_r($polylang_data['languages'], true));
+			//error_log('Current language: ' . $polylang_data['current_language']);
+			//error_log('Default language: ' . $polylang_data['default_language']);
+			
+			// URLs de home para cada idioma
+			$polylang_data['home_urls'] = array();
+			foreach ($polylang_data['languages'] as $lang) {
+				$polylang_data['home_urls'][$lang['slug']] = $lang['url'];
+			}
+		}
+		
+		return $polylang_data;
+	}
+
 	//Global variables
 	public function add_global_context($context) {
 
         $context['footer_1'] = get_field('footer_text_1', 'option');
         $context['footer_2'] = get_field('footer_text_2', 'option');
 		$context['recent_posts_noticias'] = $this->recentPostsNews();
-		$context['botones_imagen'] = $this->getBotonesImagen();
+		$context['botones_imagen'] = $this->getBotonesImagen(); //ENLACES
 		$context['redes_sociales'] = $this->getIconsRRSS();
 		$context['logos_header'] = $this->getLogosHeader();
-		$context['videos_carousel'] = $this->getVideosCarousel();
+		$context['videos'] = $this->getVideos();
 		$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
+		$context['posts_campana'] = $this->getCampanaArticles();
+		$context['paginas_acerca'] = $this->getPaginasAcerca();
+		$context['documentos'] = $this->getDocumentos();
+		$context['enlaces'] = $this->getEnlaces();
+		$context['subpaginas_servicios_publicos'] = $this->getPaginasServiciosPublicos();
+		$context['subpaginas_servicios_privados'] = $this->getPaginasServiciosPrivados();
+		$context['contacto_info'] = $this->getContactoFields();
+		//$context['afiliate_fields'] = $this->getAfiliateFields();
+		$context = array_merge($context, $this->getPolylangData());
+		$context['subpaginas_servicios'] = $this->getSubpaginasServicios();
 
         return $context;
     }

style.css

@@ -3,6 +3,16 @@
  * Description: Tema Timber de nexos
  * Author: nexos estudios
 */
+
+:root {
+  --rojo-cnt: #dc2d30;
+  --rojo-cnt-dark: #9d1b1d;
+  --rojo-cnt-light: #d6453f;
+  --reset: #7b7b7b;
+  --white:#fff;
+  --black:#000000ff;
+}
+
 @font-face {
     font-family: 'Yaro';
     src: url('assets/fonts/yaro-font-family/YaroSt-Black.ttf') format('truetype');
@@ -11,7 +21,115 @@
     font-display: swap;
 }
 
+/* PORTADA -> ENLACES */
+.margin-50 {
+    margin: 50px 0 !important;
+}
 
+/* Botón primario */
+.btn-primary-cnt {
+    border-radius: 75px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: var(--white);
+    padding: 10px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón primario - hover */
+.btn-primary-cnt:hover {
+    color: var(--black);
+    background-color: white;
+    border-color: var(--black);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}
+
+/* Botón primario - active */
+.btn-primary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+button[type="reset"] {
+    background-color: var(--reset);
+}
+
+/* Botón secundario */
+.btn-secondary-cnt {
+    border-radius: 10px !important;
+    background-color: var(--rojo-cnt-light);
+    border: 2px solid var(--rojo-cnt-light);
+    color: var(--white);
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Botón secundario - hover */
+.btn-secondary-cnt:hover {
+    color: var(--black);
+    background-color: var(--white);
+    border-color: var(--black);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}
+
+/* Botón secundario - active */
+.btn-secondary-cnt:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Quitar el focus/active de todos los elementos del menú */
+.nav-link:focus,
+.nav-link:active,
+.btn:focus,
+.btn:active,
+.dropdown-item:focus,
+.dropdown-item:active {
+    outline: none !important;
+    box-shadow: none !important;
+    background-color: var(--rojo-cnt) !important;
+    color: var(--white) !important;
+    opacity: 0.5;
+}
+
+/* PORTADA -> Titles */
+.sp-module-title::after{
+  background: var(--rojo-cnt);
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  bottom: -5px;
+  width: 150px;
+}
+
+.sp-module-title::before{
+  background: var(--black);
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  bottom: -12px;
+  width: 150px;
+}
+
+/* HEADER sindikatua */
+.text-sindikatua,
+.sp-module-title {
+    font-family: 'Yaro', Arial, sans-serif;
+}
+
+/* HEADER ->MENU */
 @media (min-width: 992px) {
     .menu-bar .dropdown:hover .dropdown-menu {
         display: block;
@@ -39,10 +157,8 @@
     opacity: 1;
 }
 
-
+/* PORTADA -> CARDS recent posts 'noticias' */
-/* CSS cards 'noticias' */
+.page-portada .recent-posts .card-img-overlay {
-.recent-posts .card-img-overlay, 
-.opinion-article .card-img-overlay {
     top: auto !important;  /* Anula el top: 0 por defecto de Bootstrap */
     bottom: 0;
     height: 25%;
@@ -51,9 +167,36 @@
     align-items: center;
 }
 
-.recent-posts .card-title, 
+/* PORTADA -> CARDS OPINION */
-.opinion-article .card-title {
+.page-portada .opinion-article .card-img-overlay {
-    color: white;
+    top: auto !important;  /* Anula el top: 0 por defecto de Bootstrap */
+    bottom: 0;
+    height: 30%;
+    background: rgba(128, 128, 128, 0.8);
+    display: flex;
+    align-items: center;
+}
+
+.page-portada .opinion-article .card-img-overlay:hover,
+.page-portada .recent-posts .card-img-overlay:hover  {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+@media (991px <= width < 1400px) {
+    .page-portada .opinion-article .card-img-overlay {
+        height: 40%;
+    }
+}
+
+@media (width < 990px) {
+    .page-portada .opinion-article .card-img-overlay {
+        height: 20%;
+    }
+}
+
+.page-portada .recent-posts .card-title, 
+.page-portada .opinion-article .card-title {
+    color: var(--white);
     margin: 0;
     font-weight: 600;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -65,37 +208,84 @@
     text-overflow: ellipsis;
 }
 
-.recent-posts .card-title a, 
+.page-portada .recent-posts .card-title a, 
-.opinion-article .card-title a {
+.page-portada .opinion-article .card-title a {
-    color: white;
+    color: var(--white);
     text-decoration: none;
     transition: color 0.3s ease;
 }
 
-.recent-posts .card-title a:hover {
+.page-portada .recent-posts .card-title a:hover {
-    color: #E30B16;
+    color: var(--rojo-cnt);
 }
 
-.card.secondary-article {
+.page-portada .recent-posts .card.secondary-article .card-title {
-    height: auto;
-}
-
-.recent-posts .card.secondary-article .card-title {
     font-size: medium;
 }
 
-
-/* Responsive */
 @media (max-width: 768px) {
-    .card-img-overlay {
+    .page-portada .recent-posts .card-img-overlay {
         height: 18%;
     }
     
-    .card-title {
+    .page-portada .recent-posts .card-title {
         font-size: 0.9rem;
     }
+    .page-portada .recent-posts .media-mb {
+    margin-bottom: 1rem; /* o el valor que necesites */
+  }
 }
 
+/* PORTADA -> ENLACES */
+.btn-hover .btn-image-only {
+    overflow: hidden;
+    border-radius: 0.375rem;
+    transition: box-shadow 0.3s ease;
+    width: fit-content;
+}
+
+.btn-hover .btn-image-only img {
+    transition: transform 0.3s ease;
+}
+
+.btn-hover:hover .btn-image-only {
+    box-shadow: 0 0 15px var(--rojo-cnt);
+}
+
+.btn-hover:hover .btn-image-only img {
+    transform: scale(1.08);
+}
+
+/* PORTADA -> SECTION VIDEO */
+.video-iframe {
+  border-radius: 0.5rem; /* o usa la clase .rounded directamente */
+  overflow: hidden;
+}
+
+/* PORTADA -> SECTION CAMPAÑA */
+.card-img-fixed {
+    max-height: 300px; /* o el valor que necesites */
+    object-fit: cover;
+    width: 100%;
+}
+
+/* noticias */
+.page-portada .img-noticias,
+.posts-noticias .img-noticias {
+    transition: filter 0.3s ease;
+}
+
+.page-portada .img-noticias:hover,
+.posts-noticias .img-noticias:hover {
+    filter: grayscale(100%);
+}
+
+.posts-noticias .card-title-text:hover {
+    font-weight: bolder;
+}
+
+
+/* FOOTER */
 /* Convert SVG RRSS white */
 .svg-white {
     filter: brightness(0) invert(1);
@@ -106,22 +296,263 @@
 }
 
 .btn-outline-white {
-    color: white;
+    color: var(--white);
-    border-color: white;
+    border-color: var(--white);
     background-color: transparent;
 }
 
 .btn-outline-white:hover {
-    background-color: white;
+    background-color: var(--white);
-    border-color: white;
+    border-color: var(--white);
 }
 
 .svg-hover-white:hover {
     filter: brightness(0) invert(1);
 }
 
-/* texto header sindikatua */
+.active-acerca {
-.text-sindikatua {
+    background-color: var(--rojo-cnt);
-    font-family: 'Yaro', Arial, sans-serif;
+}
-
+
+.servicios-publicos .card img, 
+.servicios-privados .card img {
+    width: 100%;
+    max-width: 50%;
+    height: auto;
+}
+
+.servicios .card .card-body .card-title {
+    width: fit-content;
+}
+
+.enlaces button:not(.collapsed) {
+    background-color: var(--rojo-cnt);
+    color: #fff;
+    border-color: none;
+}
+
+.enlaces button:focus,
+.enlaces button:active {
+  outline: none;
+  box-shadow: none;
+}
+
+/* FORM */
+/* Contenedor principal del formulario */
+.formulario-contacto {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Formulario centrado */
+.formulario-contacto .wpcf7-form {
+    width: 100%;
+    max-width: 500px; /* Ajusta según necesites */
+    margin: 0 auto;
+}
+
+/* Estilos para todos los inputs y textareas */
+.formulario-contacto input[type="text"],
+.formulario-contacto input[type="email"],
+.formulario-contacto input[type="tel"],
+.formulario-contacto input[type="url"],
+.formulario-contacto input[type="number"],
+.formulario-contacto textarea,
+.formulario-contacto select {
+    border-radius: 25px !important; /* Bordes redondos */
+    border: 2px solid #e9ecef !important;
+    padding: 12px 20px !important;
+    font-size: 16px;
+    transition: all 0.3s ease;
+    box-shadow: none !important;
+    margin-bottom: 15px;
+}
+
+/* Efecto hover y focus en inputs */
+.formulario-contacto input[type="text"]:focus,
+.formulario-contacto input[type="email"]:focus,
+.formulario-contacto input[type="tel"]:focus,
+.formulario-contacto input[type="url"]:focus,
+.formulario-contacto input[type="number"]:focus,
+.formulario-contacto textarea:focus,
+.formulario-contacto select:focus {
+    border-color: var(--rojo-cnt) !important;
+    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
+    outline: none;
+}
+
+.formulario-contacto input {
+    width: 100% !important;
+}
+
+/* Estilo específico para textarea */
+.formulario-contacto textarea {
+    resize: vertical;
+    min-height: 120px;
+    width: 100% !important;
+}
+
+/* Botón submit - ancho completo y redondeado */
+.formulario-contacto input[type="submit"] {
+    width: 100% !important;
+    border-radius: 25px !important;
+    background-color: var(--rojo-cnt);
+    border: 2px solid var(--rojo-cnt);
+    color: var(--white);
+    padding: 15px 30px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+}
+
+/* Efectos hover del botón */
+.formulario-contacto input[type="submit"]:hover {
+    background-color: var(--rojo-cnt-dark);
+    border-color: var(--rojo-cnt-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(255, 0, 0, 0.25);
+}
+
+/* Efectos active del botón */
+.formulario-contacto input[type="submit"]:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(255, 0, 0, 0.25);
+}
+
+/* Estilos para labels */
+.formulario-contacto label {
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: #495057;
+    display: block;
+}
+
+/* Mensajes de error de CF7 */
+.formulario-contacto .wpcf7-not-valid-tip {
+    color: var(--rojo-cnt-dark);
+    font-size: 14px;
+    margin-top: 5px;
+}
+
+/* Mensaje de validación */
+.formulario-contacto .wpcf7-validation-errors {
+    border: 1px solid var(--rojo-cnt-dark);
+    background: #f8d7da;
+    color: #721c24;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Mensaje de éxito */
+.formulario-contacto .wpcf7-mail-sent-ok {
+    border: 1px solid #28a745;
+    background: #d4edda;
+    color: #155724;
+    border-radius: 15px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+/* Responsive - pantallas pequeñas */
+@media (max-width: 768px) {
+    .formulario-contacto {
+        padding: 15px;
+    }
+    
+    .formulario-contacto .wpcf7-form {
+        max-width: 100%;
+    }
+    
+    .formulario-contacto input[type="submit"] {
+        font-size: 16px;
+        padding: 12px 25px;
+    }
+}
+
+/* Texto sección tease.twig */
+.link-underline-animate {
+  position: relative;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.link-underline-animate::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background-color: var(--rojo-cnt); /* color del subrayado */
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.link-underline-animate:hover {
+  color: var(--rojo-cnt) !important;  /* color del texto al hacer hover */
+}
+
+.link-underline-animate:hover::after {
+  width: 100%;
+}
+
+/* search page */
+.offcanvas-body {
+  height: 18vh!important; /* altura del 18% del viewport */
+}
+
+/* Resetear estilos de Bootstrap en la paginación */
+.pagination-block .pagination {
+    margin-bottom: 0;
+}
+
+.pagination-block .page-item {
+    display: flex;
+    align-items: center;
+    margin: 0; /* Resetear margin por defecto */
+}
+
+/* Estilos específicos para números de página */
+.page-number {
+    padding: 10px 15px !important;
+    min-width: 44px;
+    text-align: center;
+    border-color: var(--reset);
+    background-color: var(--reset);
+    border-radius: 10px;
+    color: var(--white);
+}
+
+.current-page {
+    border-radius: 75px !important; /* Mismo border-radius que activos */
+}
+
+.btn-pagination-position {
+    display: inline-flex;
+    align-items: end;
+    justify-content: center;
+    min-height: 44px;
+}
+
+.btn-no-hover {
+    transition: none !important;
+    pointer-events: none;
+    cursor: default !important;
+}
+
+.btn-page-hover:hover {
+    color: var(--black);
+    background-color: var(--white);
+    border-color: var(--black);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}
+
+a.btn-page-hover:hover {
+    border: 2px solid var(--black) !important;
 }

views/layouts/base.twig

@@ -19,8 +19,8 @@
                     </div>
 
                     <!-- nav -->
-                    <div class="row align-items-center justify-content-around container-fluid bg-body-tertiary">
+                    <div class="align-items-center justify-content-around bg-body-tertiary d-none d-lg-flex">
-                        <div class="col-7 col-md-10">
+                        <div>
                             <nav class="navbar navbar-expand-lg">
                                 <div class="container-fluid">
                                     <div class="collapse navbar-collapse" id="navbarNavDropdown">
@@ -29,11 +29,11 @@
                                 </div>
                             </nav>
                         </div>
-                        <div class="col-3 col-md-1 mt-2 mt-sm-0">
+                        {#<div>
                             {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
-                        </div>
+                        </div> #}
-                        <div class="col-2 col-md-1">
+                        <div>
-                            {% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items, 'burger_id': 'menu-burger-desktop'} %}
                         </div>
                     </div>
                     <!-- end nav -->
@@ -48,7 +48,7 @@
             {% endif %}
             <div class="wrapper">
                 {% block content %}
-                    Sorry, no content
+                    Lo siento, no hay contenido.
                 {% endblock %}
             </div>
         </section>

views/partials/breadcrumb.twig

@@ -0,0 +1,26 @@
+<div class="alert alert-light m-0 mb-2 p-2" role="alert">
+    <nav aria-label="breadcrumb">
+    <ol class="breadcrumb m-0">
+        <li class="breadcrumb-item"><a href="{{ site.url }}">Inicio</a></li>
+
+        {% if post.post_type == 'page' %}
+        {# Si tiene padres, recorrerlos #}
+        {% set ancestors = post.ancestors %}
+        {% for ancestor in ancestors|reverse %}
+            <li class="breadcrumb-item">
+            <a href="{{ ancestor.link }}">{{ ancestor.title }}</a>
+            </li>
+        {% endfor %}
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+
+        {% elseif post.post_type == 'post' %}
+        <li class="breadcrumb-item"><a href="{{ site.url }}/blog">Blog</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+
+        {% elseif post.post_type != 'page' %}
+        <li class="breadcrumb-item"><a href="{{ post.type_archive_link }}">{{ post.post_type_label }}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+        {% endif %}
+    </ol>
+    </nav>
+</div>

views/partials/btn-search.twig

@@ -1,16 +1,18 @@
-<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
+<section class="section-search">
-<i class="bi bi-search"></i>
+    <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
-</button>
+        <i class="bi bi-search"></i>
+    </button>
 
-<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+    <div class="offcanvas offcanvas-top mt-3" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="max-height: 18vh;">
-<div class="offcanvas-header">
+        <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
+            <h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
-    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-</div>
+        </div>
-<div class="offcanvas-body">
+        <div class="offcanvas-body">
-    <form class="d-flex mt-3" role="search">
+            <form class="d-flex mt-3" role="search" method="get" action="/">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+                <input class="form-control me-2" type="search" name="s" placeholder="Buscar..." aria-label="Search"/>
-        <button class="btn btn-outline-success" type="submit">Search</button>
+                <button class="btn btn-primary-cnt" type="submit">Buscar</button>
-    </form>
+            </form>
-</div>
+        </div>
-</div>
+    </div>
+</section>

views/partials/comment-form.twig

@@ -1,32 +1,57 @@
-<div class="comment-form">
+<div class="comment-form my-5">
-    <h3>Add comment</h3>
+    <p class="position-relative fs-4 fw-bold sp-module-title">Añadir Comentario</p>
-    <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
+    
-        {% if user %}
+    <div class="container mt-4">
-            <input type="hidden" name="email" value="{{ user.email }}" />
+    <div class="row justify-content-center">
-            <input type="hidden" name="author" value="{{ user.name }}" />
+        <div class="col-lg-6 col-md-8 col-12">
-            <input type="hidden" name="url" value="{{ user.link }}" />
+            <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
-        {% else %}
+                {% if user %}
-            <label>
+
-                Email<br />
+                    <div class="mb-3 row">
-                <input required name="email" type="email" id="email" />
+                        <label for="nombre" class="form-label">Nombre</label>
-            </label>
+                        <input class="form-control form-control-sm" type="text" name="author" value="{{ user.name }}" />
-            <label>
+                    </div>
-                Name<br />
+
-                <input required name="author" type="text" />
+                    <div class="mb-3 row">
-            </label>
+                        <label for="nombre" class="form-label">Email</label>
-            <label>
+                        <input class="form-control form-control-sm" type="email" name="email" value="{{ user.email }}" />
-                Website<br />
+                    </div>
-                <input name="url" type="url" />
+
-            </label>
+                    <input type="hidden" name="url" value="{{ user.link }}" />
-        {% endif %}
+
-        <label>
+                {% else %}
-            Comment<br />
+                    <div class="mb-3">
-            <textarea placeholder="Leave a comment..." name="comment" cols="60" rows="3"></textarea>
+                        <label for="nombre" class="form-label">Email</label>
-        </label>
+                        <input class="form-control form-control-sm" required name="email" type="email" id="email" />
-        <input name="comment_post_ID" value="{{ post.id }}" type="hidden" />
+                    </div>
-        <input name="comment_parent" value="{{ comment.id|default('0') }}" type="hidden" />
+
-        <button type="submit" name="Submit" class="btn">Send</button>
+                    <div class="mb-3">
-        <button type="reset">Cancel</button>
+                        <label for="nombre" class="form-label">Nombre</label>
-        <p>Your comment will be revised by the site if needed.</p>
+                        <input class="form-control form-control-sm" required name="author" type="text" />
-    </form>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Website</label>
+                        <input class="form-control form-control-sm" name="url" type="url" />
+                    </div>
+                {% endif %}
+                <div class="mb-3 row">
+                    <label for="comment" class="form-label">Comentario</label>
+                    <textarea class="form-control form-control-sm" placeholder="Deja un comentario..." name="comment" cols="60" rows="3">
+                    </textarea>
+                </div>
+
+                <input name="comment_post_ID" value="{{ post.id }}" type="hidden" />
+                <input name="comment_parent" value="{{ comment.id|default('0') }}" type="hidden" />
+
+                <button type="submit" name="Submit" class="btn btn-primary-cnt">Enviar</button>
+                <button type="reset" class="btn btn-primary-cnt">Cancelar</button>
+                
+                <div class="alert alert-warning mt-5" role="alert">
+                    <p>Tu comentario será revisado por el administrador antes de ser publicado.</p>
+                </div>
+            </form>
+        </div>
+    </div>
+    </div>
 </div>

views/partials/comment.twig

@@ -6,7 +6,7 @@
         {% include 'partials/comment-form.twig' %}
 
         {% if post.comments %}
-            <h4>replies</h4>
+            <h4>Replicar</h4>
             <div class="comments">
                 {% for cmt in comment.children %}
                     {% include 'partials/comment.twig' with {

views/partials/footer.twig

@@ -26,16 +26,28 @@
         </div>
         <div class="col-sm-3 mb-5">
             
-            
         </div>
         <div class="col-sm-3">
-            <h2>Contactos</h2>
+            {% if function('pll_current_language') == 'eu' %}
+                <h2>Kontaktua</h2>
+            {% else %}
+                <h2>Contactos</h2>
+            {% endif %}
         </div>
         
     </div>
-    <div class="py-2 text-center">
+    <div class="py-2 text-center mt-5 border-top border-light">
-        <p class="mb-0 fs-8">&bullet; Todos los derechos reservados &bullet; {{"now"|date('Y')}}</p>
+        {% if function('pll_current_language') == 'eu' %}
-        <a class="nav-link d-inline" href="/politica-de-privacidad">Aviso legal y política de privacidad &bullet;</a>
+            <p>Web orri honen edukia Creative Commons Aitortu-Partekatu Berdin 4.0 Nazioarteko lizentzia baten pean dago, kanpoko iturri bat adierazten denean izan ezik.</p>
-        <a class="nav-link d-inline" href="/politica-de-cookies">Política de cookies</a>
+            <p class="mb-0 fs-8">&bullet; Eskubide guztiak erreserbatuta &bullet; {{"now"|date('Y')}}</p>
+            <a class="nav-link d-inline" href="/politica-de-privacidad">Lege oharra eta pribatutasun politika &bullet;</a>
+            <a class="nav-link d-inline" href="/politica-de-cookies">Cookien politika</a>
+        {% else %}
+            <p>El contenido de esta página web está bajo una licencia Creative Commons Reconocimiento-Compartir Igual 4.0 Internacional excepto aquel en el que se indique una fuente externa.</p>
+            <p class="mb-0 fs-8">&bullet; Todos los derechos reservados &bullet; {{"now"|date('Y')}}</p>
+            <a class="nav-link d-inline" href="/politica-de-privacidad">Aviso legal y política de privacidad &bullet;</a>
+            <a class="nav-link d-inline" href="/politica-de-cookies">Política de cookies</a>
+        {% endif %}
+        
     </div>
 </div>

views/partials/logos-header.twig

@@ -1,31 +1,39 @@
 {# Sección Logos #}
-<a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+
 {% if logos_header %}
     <div class="row g-3">
         {% for logo in logos_header %}
             {% if loop.first %}
                 {# Primera columna #}
                 <div class="col-lg-5 col-12 mb-3 mb-md-0">
-                    <div class="d-flex align-items-center justify-content-center">
+                    <div class="d-flex align-items-center justify-content-between">
-                        <img src="{{ logo.logo.sizes.medium }}"
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
-                            alt="{{ logo.logo.alt }}"
+                            <div class="d-flex align-items-center">
-                            class="img-fluid mb-2 mb-sm-0 mb-md-2 mb-lg-0 me-sm-3 me-md-0 me-lg-3"
+                                <img src="{{ logo.logo.sizes.medium }}"
-                            style="max-height: 100px; flex-shrink: 0;">
+                                    alt="{{ logo.logo.alt }}"
-                        <h1 class="mb-0 text-center text-sindikatua text-uppercase">{{ logo.texto }}</h1>
+                                    class="img-fluid me-3"
+                                    style="max-height: 100px; flex-shrink: 0;">
+                                <h1 class="mb-0 text-sindikatua text-uppercase">{{ logo.texto }}</h1>
+                            </div>
+                        </a>
+                        <div class="d-block d-lg-none">  
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items, 'burger_id': 'menu-burger-mobile'} %}
+                        </div>
                     </div>
                 </div>
             {% else %}
                 {# Segunda columna #}
-                <div class="col-lg-7 col-12">
+                <div class="col-lg-7 col-12 d-none d-lg-block">
                     <div class="d-flex align-items-center justify-content-center justify-content-md-start h-100">
-                        <img src="{{ logo.logo.sizes.large }}"
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
-                            alt="{{ logo.logo.alt }}"
+                            <img src="{{ logo.logo.sizes.large }}"
-                            class="img-fluid"
+                                alt="{{ logo.logo.alt }}"
-                            style="max-width: 100%; height: auto;">
+                                class="img-fluid"
+                                style="max-width: 100%; height: auto;">
+                        </a>
                     </div>
                 </div>
             {% endif %}
         {% endfor %}
     </div>
 {% endif %}
-</a>

views/partials/menu-burger.twig

@@ -1,11 +1,15 @@
 {% if menu %}
 <nav class="navbar justify-content-center menu-burger">
     {#<a class="navbar-brand" href="#"></a>#}
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" 
+			data-bs-toggle="offcanvas" 
+			data-bs-target="#{{ burger_id|default('menu-burger') }}" 
+			aria-controls="{{ burger_id|default('menu-burger') }}" 
+			aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="{{ burger_id|default('menu-burger') }}" aria-labelledby="offcanvasNavbarLabel">
       <div class="offcanvas-header">
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
@@ -15,17 +19,30 @@
 			{% if (item.children) %}
 				<li class="nav-item dropdown effect-nav">
 					{#<a class="nav-link dropdown-toggle" href="{{ item.link }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">#}
-					<a class="nav-link dropdown-toggle text-light" href="{{ item.link }}" role="button" aria-expanded="false">
+					<a class="nav-link dropdown-toggle text-light" 
-						{{item.title}}</a>
+						{% if item.target %}target="{{ item.target }}"{% endif %}
+						{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
+						href="{{ item.link }}" 
+						role="button" 
+						aria-expanded="false">
+						{{item.title}}
+					</a>
 					<ul class="dropdown-menu">
 						{% for subitem in item.children %}
-							<li><a class="dropdown-item text-dark" href="{{ subitem.link }}">{{subitem.title}}</a></li>
+							<li><a class="dropdown-item text-dark" 
+								{% if subitem.target %}target="{{ subitem.target }}"{% endif %}
+								{% if subitem.xfn %}rel="{{ subitem.xfn }}"{% endif %}
+								href="{{ subitem.link }}">
+							{{subitem.title}}</a></li>
 						{% endfor %}
 					</ul>
 				</li>
 			{% else %}
 				<li class="{{item.classes | join(' ')}} nav-item effect-nav">
-					<a class="nav-link text-light" href="{{ item.link }}">
+					<a class="nav-link text-light" 
+							href="{{ item.link }}"
+							{% if item.xfn %}rel="{{ item.xfn }}"{% endif %} 
+							{% if item.target %}target="{{ item.target }}"{% endif %}>
 						{{ item.title }}
 					</a>
 					{% include 'partials/menu.twig' with {items: item.children} %}

views/partials/menu.twig

@@ -4,20 +4,37 @@
 			{% if (item.children) %}
 				<li class="nav-item dropdown effect-nav">
 					{#<a class="nav-link dropdown-toggle" href="{{ item.link }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">#}
-					<a class="nav-link dropdown-toggle" href="{{ item.link }}" role="button" aria-expanded="false">
+					<a class="nav-link dropdown-toggle" 
-						{{item.title}}</a>
+						href="{{ item.link }}" 
+						role="button" 
+						aria-expanded="false"
+						{% if item.xfn %}rel="{{ item.xfn }}"{% endif %}
+						{% if item.target %}target="{{ item.target }}"{% endif %}>
+						{{item.title}}
+					</a>
 					<ul class="dropdown-menu">
 						{% for subitem in item.children %}
-							<li><a class="dropdown-item" href="{{ subitem.link }}">{{subitem.title}}</a></li>
+							<li><a class="dropdown-item" 
+									href="{{ subitem.link }}"
+									{% if subitem.xfn %}rel="{{ subitem.xfn }}"{% endif %} 
+									{% if subitem.target %}target="{{ subitem.target }}"{% endif %}>
+									{{subitem.title}}
+								</a>
+							</li>
 						{% endfor %}
 					</ul>
 				</li>
 			{% else %}
 				<li class="{{item.classes | join(' ')}} nav-item effect-nav">
-					<a class="nav-link" href="{{ item.link }}">
+					<a class="nav-link" 
+							href="{{ item.link }}"
+							{% if item.xfn %}rel="{{ item.xfn }}"{% endif %} 
+							{% if item.target %}target="{{ item.target }}"{% endif %}>
 						{{ item.title }}
 					</a>
-					{% include 'partials/menu.twig' with {items: item.children} %}
+					<div class="d-block d-lg-none">
+						{% include 'partials/menu.twig' with {items: item.children} %}
+					</div>
 				</li>
 			{% endif %}
 		{% endfor %}

views/partials/pagination.twig

@@ -1,43 +1,60 @@
 {% if posts.pagination.pages is not empty %}
-    <nav class="pagination-block">
+    <nav class="pagination-block d-flex justify-content-center">
         <ul class="pagination">
             {# First #}
             {% if (posts.pagination.pages|first) and posts.pagination.pages|first.current != true %}
-                <li class="first btn">
+                <li class="first mx-2 border border-0">
-                    <a href="{{ posts.pagination.pages|first.link }}">First</a>
+                    <a href="{{ posts.pagination.pages|first.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Inicio</a>
                 </li>
             {% else %}
-                <li class="first btn disabled"><button disabled>First</button></li>
+                <li class="first disabled mx-2 border border-0" >
+                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Inicio</button>
+                </li>
             {% endif %}
 
             {# Previous #}
             {% if posts.pagination.prev %}
-                <li class="prev btn"><a href="{{ posts.pagination.prev.link }}">Previous</a></li>
+                <li class="prev mx-2 border border-0">
+                    <a href="{{ posts.pagination.prev.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Anterior</a>
+                </li>
             {% else %}
-                <li class="prev btn disabled"><button disabled>Previous</button></li>
+                <li class="prev disabled mx-2 border border-0">
+                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Anterior</button>
+                </li>
             {% endif %}
 
             {# Pages #}
             {% for page in posts.pagination.pages %}
                 {% if page.link %}
-                    <li><a href="{{ page.link }}" class="{{ page.class }}">{{ page.title }}</a></li>
+                    <li class="mx-2 btn-pagination-position">
+                        <a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover" >{{ page.title }}</a>
+                    </li>
                 {% else %}
-                    <li class="current"><span class="{{ page.class }}">{{ page.title }}</span></li>
+                    <li class="current mx-2 btn-pagination-position">
+                        <span class="{{ page.class }}">{{ page.title }}</span>
+                    </li>
                 {% endif %}
             {% endfor %}
 
             {# Next #}
             {% if posts.pagination.next %}
-                <li class="next btn"><a href="{{ posts.pagination.next.link }}">Next</a></li>
+                <li class="next mx-2 border border-0">
+                    <a href="{{ posts.pagination.next.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Siguiente</a>
+                </li>
             {% else %}
-                <li class="next btn disabled"><button disabled>Next</button></li>
+                <li class="next disabled mx-2 border border-0">
+                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Siguiente</button>
+                </li>
             {% endif %}
 
             {# Last #}
             {% if (posts.pagination.pages|last) and posts.pagination.pages|last.current != true %}
-                <li class="last btn"><a href="{{ posts.pagination.pages|last.link }}">Last</a></li>
+                <li class="last mx-2 border border-0">
+                <a href="{{ posts.pagination.pages|last.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Última</a></li>
             {% else %}
-                <li class="last btn disabled"><button disabled>Last</button></li>
+                <li class="last disabled mx-2 border border-0">
+                    <button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Última</button>
+                </li>
             {% endif %}
         </ul>
     </nav>

views/partials/section-videos.twig

@@ -1,97 +1,153 @@
-<section class="py-5">
-    <div class="container">
-        <div class="row align-items-center">
 
-            {# Primera columna - Carousel con vídeos embebidos #}
+<div class="row align-items-stretch">
-            <div class="col-lg-8 col-12 mb-4 mb-lg-0">
-                <h2 class="mb-4">Últimos Vídeos</h2>
 
-                {% if videos_carousel %}
+    {# Primera columna - Carousel con vídeos embebidos #}
-                    <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
+    <div class="col-lg-8 col-12 mb-4 mb-lg-0">
-                        <div class="carousel-inner">
+        <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Vídeos', 'Sindikatua')|upper }}</h1>
-                            {% for pair in videos_carousel|batch(2, null) %}
-                                <div class="carousel-item {% if loop.first %}active{% endif %}">
-                                    <div class="row">
-                                        {% for video in pair %}
-                                            {% if video %}
-                                                <div class="col-6">
-                                                    <div class="video-item">
-                                                        {% set url_video = video.meta('url_video') %}
-                                                        {% set video_data = generar_embed(url_video) %}
 
-                                                        {% if video_data %}
+        {% if videos %}
-                                                            <div class="ratio ratio-1x1">
+            <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
-                                                                <iframe src="{{ video_data.embed_url }}" 
+                <div class="carousel-inner">
-                                                                        title="{{ video.titulo }}"
+                {% for pair in videos|batch(2, null) %}
-                                                                        frameborder="0"
+                
-                                                                        allow="{{ video_data.allow }}"
+                    <div class="carousel-item {% if loop.first %}active{% endif %}">
-                                                                        allowfullscreen>
+                        <div class="row">
-                                                                </iframe>
+                        {% for video in pair %}
-                                                            </div>
+                        {% if video %}
-                                                        {% else %}
+                            <div class="col-6">
-                                                            <div class="alert alert-warning">
+                                <div class="video-item">
-                                                                <h5>{{ video.titulo }}</h5>
+                                    {% set url_video = video.meta('url_video') %}
-                                                                <p class="mb-0">No se ha configurado URL para este vídeo.</p>
+                                    {% set video_data = generar_embed(url_video) %}
-                                                            </div>
+                                    {% if video_data %}
-                                                        {% endif %}
+
-                                                    </div>
+                                    {# Thumbnail clickeable en lugar del iframe #}
-                                                </div>
+                                    <div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded" 
-                                            {% endif %}
+                                        data-bs-toggle="modal" 
-                                        {% endfor %}
+                                        data-bs-target="#videoModal"
+                                        data-video-url="{{ video_data.embed_url }}"
+                                        data-video-title="{{ video.titulo }}"
+                                        data-video-allow="{{ video_data.allow }}"
+                                        style="cursor: pointer; 
+                                                background-image: url('{{ video_data.thumbnail_url }}'); 
+                                                background-size: cover; 
+                                                background-position: center;">
+
+                                        {# Overlay con botón play #}
+                                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
+                                            <div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
+                                                style="width: 60px; height: 60px;">
+                                                <i class="bi bi-play-btn" style="font-size: 2rem;"></i>
+                                            </div>
+                                        </div>
+                                        
+                                        {# Overlay oscuro al hover #}
+                                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
+                                            style="transition: opacity 0.3s ease;">
+                                        </div>
+                                        
+                                        {# Título del vídeo #}
+                                        <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
+                                            <h6 class="mb-0 text-white">{{ video.titulo }}</h6>
+                                        </div>
                                     </div>
+
+                                    {% else %}
+                                        <div class="alert alert-warning">
+                                            <h5>{{ video.titulo }}</h5>
+                                            <p class="mb-0">{{ __('No hay URL', 'Sindikatua') }}</p>
+                                        </div>
+                                    {% endif %}
                                 </div>
-                            {% endfor %}
-                        </div>
-
-                        {% if videos_carousel|length > 1 %}
-                            <button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
-                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Anterior</span>
-                            </button>
-                            <button class="carousel-control-next" type="button" data-bs-target="#videosCarousel" data-bs-slide="next">
-                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Siguiente</span>
-                            </button>
-
-                            <div class="carousel-indicators">
-                                {% for pair in videos_carousel|batch(2, null) %}
-                                    <button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}" 
-                                            {% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
-                                {% endfor %}
                             </div>
                         {% endif %}
-                    </div>
-                {% else %}
-                    <p>No hay vídeos disponibles.</p>
-                {% endif %}
-            </div>
-
-            {# Segunda columna - Último artículo de opinión #}
-            <div class="col-lg-4 col-12 opinion-article">
-                <h2 class="mb-4">Última Opinión</h2>
-                
-                {% if ultimo_articulo_opinion %}
-                    <div class="h-100">
-                        {% for article in ultimo_articulo_opinion %}
-                            <div class="card secondary-article">
-                                <a href="{{ article.link }}">
-                                    <img src="{{ article.thumbnail.src('medium') }}" 
-                                         alt="{{ article.thumbnail.alt }}" 
-                                         class="card-img"/>
-                                    <div class="card-img-overlay">
-                                        <h3 class="card-title text-wrap">
-                                            <a href="{{ article.link }}">{{ article.title }}</a>
-                                        </h3>
-                                    </div>
-                                </a>
-                            </div>
                         {% endfor %}
+                        </div>
                     </div>
-                {% else %}
+                {% endfor %}
-                    <p class="text-muted">No hay artículos de opinión disponibles.</p>
+                </div>
+
+                {# carousel controls buttons#}                        
+                {% if videos|length > 1 %}
+                    <button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Anterior</span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#videosCarousel" data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Siguiente</span>
+                    </button>
+
+                    {# <div class="carousel-indicators">
+                        {% for pair in videos|batch(2, null) %}
+                            <button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}" 
+                                    {% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
+                        {% endfor %}
+                    </div> #}
                 {% endif %}
             </div>
 
+
+        {% endif %}
+    </div>
+
+    {# MODAL PARA REPRODUCIR VÍDEO #}
+    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="videoModalLabel"></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
+                </div>
+                <div class="modal-body p-0">
+                    <div class="ratio ratio-16x9">
+                        <iframe id="modalVideoIframe"
+                                src=""
+                                title=""
+                                frameborder="0"
+                                allow=""
+                                allowfullscreen
+                                loading="lazy">
+                        </iframe>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-</section>
+
+    {# Segunda columna - Último artículo de opinión #}
+    <div class="col-lg-4 col-12 opinion-article d-flex flex-column">
+        <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Opinión', 'Sindikatua')|upper}}</h1>
+
+        <div class="flex-grow-1 d-flex">
+            {% if ultimo_articulo_opinion and ultimo_articulo_opinion|length > 0 %}
+                {% for article in ultimo_articulo_opinion %}
+                    <div class="card w-100 h-100 secondary-article">
+                        <a class="h-100" href="{{ article.link }}">
+                            <img src="{{ article.thumbnail.src('medium') }}" 
+                                    alt="{{ article.thumbnail.alt }}" 
+                                    class="card-img h-100 object-fit-cover"/>
+
+                            <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
+                                <div>
+                                    <!-- Título -->
+                                    <p class="card-title text-wrap fs-6">
+                                        <a href="{{ article.link }}" class="text-white text-decoration-none">{{ article.title }}</a>
+                                    </p>
+
+                                    <!-- Icono + autor -->
+                                    <p class="text-white mb-0 fs-7 d-flex align-items-center">
+                                        <i class="bi bi-person me-1"></i>
+                                        {{ article.author }}
+                                    </p>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                {% endfor %}
+            {% else %}
+                <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
+            {% endif %}
+        </div>    
+    </div>
+    
+</div>

views/partials/tease-post.twig

@@ -6,7 +6,7 @@
         {{
             post.excerpt({
                 words: 5,
-                read_more: 'Keep reading'
+                read_more: 'Sigue leyendo'
             })
         }}
     </p>

views/partials/tease.twig

@@ -1,9 +1,30 @@
-<article class="tease tease-{{ post.type }}" id="tease-{{ post.id }}">
+<article class="tease tease-{{ post.type }} border border-black rounded my-3 p-2 position-relative" 
-    {% block content %}
+    id="tease-{{ post.id }}"
-        <h2 class="h2"><a href="{{ post.link }}">{{ post.title }}</a></h2>
+    style="padding-bottom: 65px !important;">
-        <p>{{ post.excerpt }}</p>
+        <div class="row align-items-center section-tease">
-        {% if post.thumbnail %}
+            <!-- Columna izquierda: título y excerpt -->
-            <img src="{{ post.thumbnail.src }}" />
+            <div class="col">
-        {% endif %}
+                <h2 class="h2">
-    {% endblock %}
+                    <a href="{{ post.link }}" 
+                        class="text-decoration-none text-dark link-underline-animate">
+                        {{ post.title }}</a>
+                </h2>
+                <p>{{ post.excerpt({
+                        words: 50,
+                        read_more: ''
+                        })  
+                    }}</p>
+                <a href="{{ post.link  }}" 
+                                class="btn position-absolute btn-secondary-cnt"
+                                style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
+                                >Sigue leyendo...</a>
+            </div>
+
+            <!-- Columna derecha: imagen (si existe) -->
+            {% if post.thumbnail %}
+                <div class="col-auto text-end">
+                    <img src="{{ post.thumbnail.src }}" style="max-height: 100px;" alt="{{ post.title }}" class="img-fluid ms-auto d-block" />
+                </div>
+            {% endif %}
+        </div>
 </article>

views/partials/top-bar.twig

@@ -1,21 +1,43 @@
 <div class="container">
+
     <div class="row align-items-center py-1">
+
         <!-- Izquierda: Botones -->
         <div class="col">
+        {% if languages %}
             <div class="btn-bar d-flex align-items-center">
-                <button class="btn btn-outline-dark btn-sm me-2">
+            {% for lang in languages %}
-                    <span class="d-inline d-sm-none">EUS</span>
+                {% if lang.slug == 'es' or lang.slug == 'cas' %}
-                    <span class="d-none d-sm-inline">EUSKERA</span>
+                    {# Botón Castellano #}
-                </button>
+                    <a href="{{ lang.url }}" 
-                <button class="btn btn-outline-dark btn-sm">
+                    class="btn {{ lang.current ? 'btn-dark' : 'btn-outline-dark' }} btn-sm  ms-2"
-                    <span class="d-inline d-sm-none">CAS</span>
+                    {% if lang.current %}aria-current="page"{% endif %}>
-                    <span class="d-none d-sm-inline">CASTELLANO</span>
+                        <span class="d-inline d-sm-none">CAS</span>
-                </button>
+                        <span class="d-none d-sm-inline">CASTELLANO</span>
+                    </a>
+                {% elseif lang.slug == 'eu' or lang.slug == 'eus' %}
+                    {# Botón Euskera #}
+                    <a href="{{ lang.url }}" 
+                    class="btn {{ lang.current ? 'btn-dark' : 'btn-outline-dark' }} btn-sm ms-2"
+                    {% if lang.current %}aria-current="page"{% endif %}>
+                        <span class="d-inline d-sm-none">EUS</span>
+                        <span class="d-none d-sm-inline">EUSKARA</span>
+                    </a>
+                {% endif %}
+            {% endfor %}
             </div>
+        {% else %}
+            <div style="background: #ffeeee; padding: 10px; border: 1px solid red;">
+                ❌ No se encontraron idiomas
+            </div>
+        {% endif %}
         </div>
 
         <!-- Right side: RRSS -->
         <div class="col d-flex justify-content-end">
+        
+            {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
+
             <div class="btn-group m-1" role="group" aria-label="First group">
                     {% for red in redes_sociales %}
                     <a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
@@ -26,9 +48,9 @@
                         {% endif %}
                     </a>
                 {% endfor %}
-                </a>
             </div>
         </div>
 
     </div>
+
 </div>

views/templates/404.twig

@@ -1,5 +1,9 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    Sorry, we couldn't find what you're looking for.
+    <main class="container py-5 text-center">
+        <h1 class="display-4">404 - {{ __('Página no encontrada', 'Sindikatua') }}</h1>
+        <p class="lead">Ez da aurkitu bilatzen duzun orria / No se ha encontrado la página que buscabas</p>
+        <a href="<?php echo home_url(); ?>" class="btn btn-primary mt-4">{{ __('Volver al inicio', 'Sindikatua') }}</a>
+    </main>
 {% endblock %}

views/templates/page-acerca-de-la-cnt.twig

@@ -1,7 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-    <div class="alert alert-warning" role="alert">
-        Acerca de la CNT ---- A simple warning alert—check it out!
-    </div>
-{% endblock %}

views/templates/page-afiliazioa.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-quieres-afiliarte.twig' %}

views/templates/page-barakaldo.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">BARAKALDO</h1>
-
-{% endblock %}

views/templates/page-berriak.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-noticias.twig' %}

views/templates/page-bideoak.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-videos.twig' %}

views/templates/page-bilbao.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">BILBAO</h1>
-
-{% endblock %}

views/templates/page-cnt-ri-buruz.twig

@@ -0,0 +1 @@
+{% extends 'templates/single-acerca.twig' %}

views/templates/page-contactos.twig

@@ -0,0 +1,83 @@
+{% extends 'layouts/base.twig' %}
+
+{% block content %}
+
+    <section class="contacto">
+        <div class="container my-5">
+            <!-- mapa & contacts -->
+            <div class="row">
+                <!-- Column map -->
+                <div class="col-md-6 mb-4 mb-md-0">
+                    {% set url_mapa = contacto_info.url_mapa %}
+                    {% if url_mapa %}
+                        {% set coordenadas = url_mapa|split('/')|slice(-2) %}
+                        {% set latitud = coordenadas[0] %}
+                        {% set longitud = coordenadas[1] %}
+
+                        <div class="ratio ratio-4x3">
+                            <iframe width="425" 
+                                    height="350" 
+                                    src="https://www.openstreetmap.org/export/embed.html?bbox={{ longitud }}%2C{{ latitud }}%2C{{ longitud }}%2C{{ latitud }}&amp;layer=mapnik&amp;marker={{ latitud }}%2C{{ longitud }}" 
+                                    style="border: 1px solid black">
+                            </iframe>
+                        </div>
+
+                        <small>
+                            <a href="https://www.openstreetmap.org/?#map=19/{{ latitud }}/{{ longitud }}">
+                                {{ __('Ver el mapa más grande', 'Sindikatua') }}
+
+                            </a>
+                        </small>
+                    {% endif %}
+                </div>
+
+                <!-- Column content -->
+                <div class="col-md-6">
+                    <div class="content">
+                        <h1>{{ contacto_info.nombre }}</h1>
+                        <p>{{ contacto_info.direccion }}</p>
+                        <p>{{ contacto_info.forma_contacto }}</p>
+                   
+                        <div class="btn-group m-1" role="group" aria-label="First group">
+                            {% if contacto_info.url_facebook %}
+                                <a href="{{ contacto_info.url_facebook }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-facebook"></i></a>
+                            {% endif %}
+                            {% if contacto_info.url_twitter %}
+                                <a href="{{ contacto_info.url_twitter }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-twitter-x"></i></a>
+                            {% endif %}
+                            {% if contacto_info.url_web %}
+                                <a href="{{ contacto_info.url_web }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                                    <i class="bi bi-globe"></i></a>
+                            {% endif %}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+            <!-- form -->
+            <div class="row mt-5">
+                <div class="col-12">
+                    <h2 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Contacto', 'Sindikatua')|upper }}</h2>
+
+                    <div class="formulario-contacto">
+                        <div class="container">
+                            <div class="row justify-content-center">
+                                <div class="col-md-8 col-lg-6">
+                                    {{ contacto_info.form | raw }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                {{ page.content }}
+            </div>
+
+        </div>
+    </section>
+{% endblock %}

views/templates/page-documentos.twig

@@ -1,8 +1,68 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class="badge text-bg-primary text-wrap">DOCUMENTOS</h1>
+    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
-    <div class="alert alert-warning" role="alert">
+
-        DOCUMENTOS ---- A simple warning alert—check it out!
+    <section class="documentos">
-    </div>
+        <div class="container">
+            {% if documentos %}
+            {#<pre>{{ dump(documentos) }}</pre>#}
+
+                {% for doc in documentos %}
+                    <div class="card mb-3">
+                        <div class="card-header">
+                            <h6 class="card-title mb-1">{{ doc.title }}</h6>
+                        </div>
+                        <div class="row g-0">
+                            <div class="col-2">
+                                {% if doc.thumbnail %}
+                                    <img src="{{ doc.thumbnail }}"
+                                        class="img-fluid object-fit-cover"
+                                        alt="{{ doc.title }}"
+                                        loading="lazy"
+                                        >
+                                {% else %}
+                                    <div class="bg-light d-flex align-items-center justify-content-center h-100 rounded-start">
+                                        <i class="bi bi-file-earmark-image-fill"></i>
+                                    </div>
+                                {% endif %}
+                            </div>
+                            <div class="col-10">
+                                <div class="card-body d-flex flex-column justify-content-between h-100 py-2">
+                                    <div>
+                                        {% if doc.content %}
+                                            <p class="card-text small mb-2">{{ doc.content }}</p>
+                                        {% endif %}
+                                    </div>
+
+                                    <div>
+                                        {% if doc.documento_url %}
+                                            <a href="{{ doc.documento_url }}" 
+                                                class="btn btn-sm me-2 btn-primary-cnt" 
+                                                target="_blank">
+                                                    <i class="bi bi-eye-fill"></i>
+                                                    {{ __('Ver documento', 'Sindikatua') }}
+                                            </a>
+
+                                            <a href="{{ doc.documento_url }}" download
+                                                class="btn btn-sm me-2 btn-primary-cnt" >
+                                                    <i class="bi bi-cloud-download-fill"></i>
+                                                    {{ __('Descargar', 'Sindikatua') }}
+                                            </a>
+
+                                        {% endif %}
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+            {% else %}
+                <div class="alert alert-info" role="alert">
+                    No hay documentos disponibles.
+                </div>
+            {% endif %}
+        </div>
+    </section>
 {% endblock %}

views/templates/page-dokumentuak.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-documentos.twig' %}

views/templates/page-donosti.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">DONOSTI</h1>
-
-{% endblock %}

views/templates/page-enlaces.twig

@@ -1,7 +1,53 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
+    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
-        Enlaces ---- A simple warning alert—check it out!
+
+    {% if enlaces %}
+    <div class="enlaces">
+        <div class="accordion" id="accordionEnlaces">
+            {% for grupo in enlaces %}
+                <div class="accordion-item">
+                    <h2 class="accordion-header">
+
+                        <button class="accordion-button {% if loop.index0 != 0 %}collapsed{% endif %}" 
+                                type="button" 
+                                data-bs-toggle="collapse" 
+                                data-bs-target="#collapse{{ loop.index }}" 
+                                aria-expanded="{% if loop.index0 == 0 %}true{% else %}false{% endif %}" 
+                                aria-controls="collapse{{ loop.index }}">
+                            {{ grupo.titulo }}
+
+                            <span class="badge bg-secondary ms-2">{{ grupo.enlaces|length }}</span>
+                        </button>
+                    </h2>
+                    <div id="collapse{{ loop.index }}" 
+                        class="accordion-collapse collapse {% if loop.index0 == 0 %}show{% endif %}" 
+                        data-bs-parent="#accordionEnlaces">
+                        <div class="accordion-body">
+                            {% if grupo.enlaces %}
+                                <div class="d-grid gap-2">
+                                    {% for enlace in grupo.enlaces %}
+                                        <a href="{{ enlace.url }}"
+                                        class="btn btn-outline-dark btn-sm text-start"
+                                        target == '_blank'
+                                        rel="noopener noreferrer">
+                                            {{ enlace.titulo }}
+                                            {% if enlace.target == '_blank' %}
+                                                <i class="fas fa-external-link-alt ms-1 small"></i>
+                                            {% endif %}
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div> 
     </div>
+    {% endif %}
+
+    {#<pre>{{ dump(enlaces) }}</pre>#}
+
 {% endblock %}

views/templates/page-hasiera.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-portada.twig' %}

views/templates/page-industria.twig

@@ -1,6 +1,7 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class=" text-bg-primary text-wrap">INDUSTRIA</h1>
+    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
+
 
 {% endblock %}

views/templates/page-irunea.twig

@@ -1,6 +0,0 @@
-{% extends 'layouts/base.twig' %}
-
-{% block content %}
-<h1 class="text-bg-primary text-wrap">IRUÑA</h1>
-
-{% endblock %}

views/templates/page-loturak.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-enlaces.twig' %}

views/templates/page-noticias.twig

@@ -1,7 +1,51 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
+    <h1 class="mb-5 position-relative fs-3 fw-bold sp-module-title">{{ post.title }}</h1>
-        NOTICIAS ---- A simple warning alert—check it out!
+
-    </div>
+    <section class="posts-noticias">
+        {% if recent_posts_noticias %}
+            {% for noticias in recent_posts_noticias %}
+
+                <div class="card my-3 position-relative">
+                    <div class="row g-0">
+                        <div class="col-md-4">
+                            <a href="{{ noticias.link }}" title="{{ noticias.title }}">
+                                <img src="{{ noticias.thumbnail.src }}" 
+                                        class="rounded-start object-fit-cover w-100 h-100 img-noticias" 
+                                        alt="{{ noticias.thumbnail.alt }}"
+                                        style="min-height: 200px;"
+                                        />
+                            </a>
+                        </div>
+                        <div class="col-md-8">
+                            <div class="card-body" style="padding-bottom: 60px;">
+                                <a href="{{ noticias.link }}" title="{{ noticias.title }}" class="text-decoration-none card-title">
+                                    <h5 class="card-title-text">{{ noticias.title }}</h5>
+                                </a>
+                                <p class="card-text"> {{
+                                        noticias.excerpt({
+                                            words: 50,
+                                            read_more: ''
+                                        })
+                                    }}</p>
+                                <p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
+                                <a href="{{ noticias.link  }}" 
+                                        class="btn position-absolute btn-secondary-cnt"
+                                        style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
+                                        >
+                                        {{ __('Sigue leyendo', 'Sindikatua') }}...
+                                        
+                                        </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            {% endfor %}
+        {% else %}
+            <h2>no hay artículos</h2>
+        {% endif %}
+    </section>
+
 {% endblock %}

views/templates/page-portada.twig

@@ -1,74 +1,121 @@
 {% extends 'layouts/base.twig' %}
 {% block content %}
+<div class="page-portada">
 
     {# Sección noticias #}
     {% if recent_posts_noticias %}
-    <section class="recent-posts">
+        <section class="recent-posts">
-        <div class="row g-4 mt-3">
+            <div class="row g-4 mt-3">
-            {# Columna izquierda - Artículo principal #}
+                {# Columna izquierda - Artículo principal #}
-            <div class="col-md-8">
+                <div class="col-md-8">
-                {% set main_article = recent_posts_noticias[0] %}
+                    {% set main_article = recent_posts_noticias[0] %}
-                <div class="card main-article">
+                    <div class="card main-article">
-                    <a href="{{ main_article.link }}">
+                        <a href="{{ main_article.link }}">
-                    <img src="{{ main_article.thumbnail.src('medium') }}" 
+                        <img src="{{ main_article.thumbnail.src('medium') }}" 
-                                    alt="{{ main_article.thumbnail.alt }}" 
+                                        alt="{{ main_article.thumbnail.alt }}" 
-                                    class="card-img " />
+                                        class="card-img img-noticias" />
-                    <div class="card-img-overlay">
+                        <div class="card-img-overlay">
-                        <h3 class="card-title text-wrap">
+                            <h3 class="card-title text-wrap">
-                            <a href="{{ main_article.link }}">{{ main_article.title }}</a>
+                                <a href="{{ main_article.link }}">{{ main_article.title }}</a>
-                        </h3>
+                            </h3>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            {# Columna derecha - Dos artículos secundarios #}
+                {# Columna derecha - Dos artículos secundarios #}
-            <div class="col-md-4">
+                <div class="col-md-4">
-                <div class="d-flex flex-column h-100 justify-content-between">
+                    <div class="d-flex flex-column h-100 justify-content-between">
-                    {% for article in recent_posts_noticias[1:3] %}
+                        {% for article in recent_posts_noticias[1:3] %}
-                        <div class="card secondary-article">
+                            <div class="card secondary-article {% if loop.first %}media-mb{% endif %}">
-                            <a href="{{ article.link }}">
+                                <a href="{{ article.link }}">
-                            <img src="{{ article.thumbnail.src('medium') }}" 
+                                <img src="{{ article.thumbnail.src('medium') }}" 
-                                            alt="{{ article.thumbnail.alt }}" 
+                                                alt="{{ article.thumbnail.alt }}" 
-                                            class="card-img "/>
+                                                class="card-img img-noticias"/>
-                            <div class="card-img-overlay">
+                                <div class="card-img-overlay">
-                                <h3 class="card-title text-wrap">
+                                    <h3 class="card-title text-wrap">
-                                    <a href="{{ article.link }}">{{ article.title }}</a>
+                                        <a href="{{ article.link }}">{{ article.title }}</a>
-                                </h3>
+                                    </h3>
+                                </div>
                             </div>
-                        </div>
+                        {% endfor %}
-                    {% endfor %}
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-    {% else %}
-        <h2>no hay artículos</h2>
-    {% endif %}
-
-    {# Sección Logos #}
-    {% if botones_imagen %}
-        <section class="custom-buttons-section my-5">
-            <div class="row g-3">
-                {% for boton in botones_imagen %}
-                <div class="col-md-3 col-sm-6">
-                    <a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
-                        <img src="{{ boton.imagen.sizes.medium }}" 
-                             alt="{{ boton.imagen.alt }}" 
-                             class="img-fluid rounded">
-                    </a>
-                </div>
-            {% endfor %}
-            </div>
         </section>
     {% endif %}
 
-    {# Sección vídeos #}
+    {# Sección Enlaces #}
-    {% include 'partials/section-videos.twig' %}
+        <section class="custom-buttons-section margin-50">
+            <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Enlaces', 'Sindikatua')|upper }}</h1>
 
-    {# Sección Campañas / conlfictos #}
+            <div class="row g-3">
-    <h2> Sección Campañas / conflictos</h2>
+                {% if botones_imagen %}
+                    {% for boton in botones_imagen %}
+                        <div class="col-6 col-sm-6 col-md-3 btn-hover">
+                            <a href="{{ boton.enlace }}" class="btn-image-only d-block" target="_blank" rel="noopener noreferrer">
+                                <img src="{{ boton.imagen.sizes.medium }}" 
+                                    alt="{{ boton.imagen.alt }}" 
+                                    class="img-fluid rounded">
+                            </a>
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            </div>
+        </section>
 
+    {# Sección vídeos + Opinión #}
+    <section class="py-4 margin-50">
+        {% include 'partials/section-videos.twig' %}
+    </section>
 
+    {# Sección Campañas / conflictos #}
+    <section class="recent-posts py-4">
+        <div class="row align-items-stretch">
 
+            <div class="col-6">
+                <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Campañas', 'Sindikatua')|upper }}</h1>
 
+                {% if posts_campana and posts_campana|length > 0 %}
+                    {% set main_article = posts_campana[0] %}
+                    <div class="card main-article">
+                        <a href="{{ main_article.link }}">
+                        <img src="{{ main_article.thumbnail.src('medium') }}" 
+                                        alt="{{ main_article.thumbnail.alt }}" 
+                                        class="card-img card-img-fixed img-noticias" />
+                        <div class="card-img-overlay">
+                            <h3 class="card-title text-wrap">
+                                <a href="{{ main_article.link }}">{{ main_article.title }}</a>
+                            </h3>
+                        </div>
+                    </div>
+                {% else %}
+                    <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
+                {% endif %}
+            </div>
+
+            <div class="col-6">
+                <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Conflictos Laborales', 'Sindikatua')|upper }}</h1>
+
+                {% if posts_campana and posts_campana|length > 0 %}
+                    {% set main_article = posts_campana[0] %}
+                    <div class="card main-article">
+                        <a href="{{ main_article.link }}">
+                        <img src="{{ main_article.thumbnail.src('medium') }}" 
+                                        alt="{{ main_article.thumbnail.alt }}" 
+                                        class="card-img card-img-fixed img-noticias" />
+                        <div class="card-img-overlay">
+                            <h3 class="card-title text-wrap">
+                                <a href="{{ main_article.link }}">{{ main_article.title }}</a>
+                            </h3>
+                        </div>
+                    </div>
+                {% else %}
+                    <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
+                {% endif %}
+            </div>
+
+        </div>
+    </section>
+
+</div>
 {% endblock %}

views/templates/page-quieres-afiliarte.twig

@@ -1,6 +1,15 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class="text-bg-primary text-wrap">AFILIATE</h1>
+
+    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
+
+    <div class="affiliate-section">
+        <div class="container">
+            <div class="page-content">
+                {{ post.content }}
+            </div>
+        </div>
+    </div>
     
 {% endblock %}

views/templates/page-servicios-privados.twig

@@ -1,6 +1,37 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class="text-bg-primary text-wrap">SERVICIOS PRIVADOS</h1>
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PRIVADOS</p>
+
+    <section class="grid servicios servicios-privados">
+        <div class="container">
+            <div class="row">
+            {% for pagina in subpaginas_servicios_privados %}
+            <div class="col-12 mb-2">
+                <article>
+                    <div class="card">
+                        {% if pagina.thumbnail %}
+                            <img src="{{ pagina.thumbnail.src}}" 
+                                    alt="{{ pagina.thumbnail.alt }}"
+                                    >
+                        {% else %}
+                            <p>no hay thumbnail </p>
+                        {% endif %}
+                        <div class="card-body">
+                            <a href="{{ pagina.link }}" class="text-decoration-none">
+                                <h5 href="{{ pagina.link }}" class="card-title">{{ pagina.title }}</h5>
+                            </a>
+                            <p class="card-text">{{ pagina.content }}</p>
+                            
+                        </div>
+                    </div>
+                </article>
+            </div>         
+            {% else %}
+                <p>No hay subpáginas disponibles.</p>
+            {% endfor %}
+            </div>
+        </div>
+    </section>
     
 {% endblock %}

views/templates/page-servicios-publicos.twig

@@ -1,5 +1,36 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <h1 class="text-bg-primary text-wrap">SERVICIOS PÚBLICOS</h1>   
+    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PÚBLICOS</p>
+
+    <section class="grid servicios servicios-publicos">
+        <div class="container">
+            <div class="row">
+            {% for pagina in subpaginas_servicios_publicos %}
+            <div class="col-12 mb-2">
+                <article>
+                    <div class="card">
+                        {% if pagina.thumbnail %}
+                            <img src="{{ pagina.thumbnail.src}}" 
+                                    alt="{{ pagina.thumbnail.alt }}"
+                                    >
+                        {% else %}
+                            <p>no hay thumbnail </p>
+                        {% endif %}
+                        <div class="card-body">
+                            <a href="{{ pagina.link }}" class="text-decoration-none">
+                                <h5 href="{{ pagina.link }}" class="card-title fs-4 text-dark link-underline-animate">{{ pagina.title }}</h5>
+                            </a>
+                            <p class="card-text">{{ pagina.content }}</p>
+                        </div>
+                    </div>
+                </article>
+            </div>         
+            {% else %}
+                <p>No hay subpáginas disponibles.</p>
+            {% endfor %}
+            </div>
+        </div>
+    </section>
+
 {% endblock %}

views/templates/page-videos.twig

@@ -1,7 +1,87 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
+    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
-        VIDEOS ---- A simple warning alert—check it out!
+
+    <div class="container text-center">
+        <div class="row">
+            {% if videos %}
+                {% for video in videos %}
+                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
+                    <div class="video-item">
+                        {% set url_video = video.meta('url_video') %}
+                        {% set video_data = generar_embed(url_video) %}
+                        {% if video_data %}
+
+                        {# Thumbnail clickeable en lugar del iframe #}
+                        <div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded" 
+                            data-bs-toggle="modal" 
+                            data-bs-target="#videoModal"
+                            data-video-url="{{ video_data.embed_url }}"
+                            data-video-title="{{ video.titulo }}"
+                            data-video-allow="{{ video_data.allow }}"
+                            style="cursor: pointer; 
+                                    background-image: url('{{ video_data.thumbnail_url }}'); 
+                                    background-size: cover; 
+                                    background-position: center;">
+
+                            {# Overlay con botón play #}
+                            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
+                                <div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
+                                    style="width: 60px; height: 60px;">
+                                    <i class="bi bi-play-btn" style="font-size: 2rem;"></i>
+                                </div>
+                            </div>
+                            
+                            {# Overlay oscuro al hover #}
+                            <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
+                                style="transition: opacity 0.3s ease;">
+                            </div>
+                            
+                            {# Título del vídeo #}
+                            <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
+                                <h6 class="mb-0 text-white">{{ video.titulo }}</h6>
+                            </div>
+                        </div>
+
+                        {% else %}
+                            <div class="alert alert-warning">
+                                <h5>{{ video.titulo }}</h5>
+                                <p class="mb-0">No se ha configurado URL para este vídeo.</p>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            {% else %}
+                <p>No hay vídeos disponibles.</p>
+            {% endif %}
+        </div>
+
+        {# MODAL PARA REPRODUCIR VÍDEO #}
+        <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="videoModalLabel"></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
+                    </div>
+                    <div class="modal-body p-0">
+                        <div class="ratio ratio-16x9">
+                            <iframe id="modalVideoIframe"
+                                    src=""
+                                    title=""
+                                    frameborder="0"
+                                    allow=""
+                                    allowfullscreen
+                                    loading="lazy">
+                            </iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </div>
+
 {% endblock %}

views/templates/page-zerbitzu-publikoak.twig

@@ -0,0 +1 @@
+{% extends 'templates/page-servicios-publicos.twig' %}

views/templates/search.twig

@@ -2,17 +2,23 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="content-wrapper">
+    <section class="search-canvas ">
-        {% for post in posts %}
+        <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>
-            {% include ['partials/tease-' ~ post.type ~ '.twig', 'partials/tease.twig'] %}
+
-        {% endfor %}
+        <p>{{ __('Resultados de búsqueda para', 'Sindikatua')}}: "{{ search_query }}"</p>
+        <div class="content-wrapper">
+            {% for post in posts %}
+                {% include ['partials/tease-' ~ post.type ~ '.twig', 'partials/tease.twig'] %}
+            {% endfor %}
+
+            {% include 'partials/pagination.twig' with {
+                pagination: posts.pagination({
+                    show_all: false,
+                    mid_size: 3,
+                    end_size: 2
+                })
+            } %}
+        </div>
+    </section>
 
-        {% include 'partials/pagination.twig' with {
-            pagination: posts.pagination({
-                show_all: false,
-                mid_size: 3,
-                end_size: 2
-            })
-        } %}
-    </div>
 {% endblock %}

views/templates/single-acerca.twig

@@ -0,0 +1,40 @@
+{% extends 'layouts/base.twig' %}
+
+{% block content %}
+<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>
+
+<div class="container mt-4">
+    <div class="row">
+
+        <!-- Columna izquierda: títulos -->
+        <div class="col-md-4 border-end">
+            <ul id="post-list" class="list-group">
+                {% for pagina in paginas_acerca %}
+                <li class="list-group-item {% if pagina.id == post.id %}active-acerca{% endif %}">
+                    <a href="{{ pagina.link }}"
+                       class="text-decoration-none d-block w-100 text-black {% if pagina.id == post.id %}text-white{% endif %}">
+                        {{ pagina.title }}
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        
+        <!-- Columna derecha: contenido del post actual -->
+        <div class="col-md-8">
+            <div class="card mb-3">
+                <div class="card-header">
+                    <h5 class="card-title">{{ post.title }}</h5>
+                </div>
+                <div class="card-body" style="padding-bottom: 60px;">
+                    <div class="card-text">
+                        {{ post.content }}
+                    </div>          
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+{% endblock %}

views/templates/single-servicios.twig

@@ -0,0 +1,32 @@
+{% extends 'layouts/base.twig' %}
+
+{% block content %}
+    {# <p>Servicios test</p> #}
+
+    <div class="container">
+    <article class="post-type-{{ post.type }}" id="post-{{ post.id }}">
+        <section class="article-content mt-5 border-dark border-top">
+
+            <!-- Title & author & date -->
+            <h1 class="article-h1">{{ post.title }}</h1>
+            <p class="blog-author mt-3 mb-5 border-dark border-bottom">
+                <span>{{ __('Autor', 'Sindikatua')}}:</span>
+                <a href="{{ post.author.path }}">{{ post.author.name }}</a>
+                <span>&bull;</span>
+                <time datetime="{{ post.date|date('Y-m-d H:i:s') }}">{{ post.date }}</time>
+            </p>
+
+            <!-- Img & Content -->
+            <div class="d-flex justify-content-center my-5">
+                <img src="{{ post.thumbnail.src }}" 
+                        alt="{{ post.thumbnail.alt }}"
+                        class="img-fluid object-fit-contain border border-1 rounded p-3"
+                        style="max-width: 500px; max-height: 300px;"
+                        />
+            </div>
+            <div class="article-body">{{ post.content }}</div>
+
+        </section>
+    </article>
+    </div>
+{% endblock %}

views/templates/single.twig

@@ -1,23 +1,31 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="content-wrapper">
+    {# <h1>SINGLE ARTÍCULOS</h1> #}
+
+    <div class="container">
         <article class="post-type-{{ post.type }}" id="post-{{ post.id }}">
-            <img src="{{ post.thumbnail.src|resize(1200, 300) }}" />
+            <!-- <img src="{{ post.thumbnail.src }}" /> -->
-            <section class="article-content">
+
+            <section class="article-content mt-5 border-dark border-top">
+
                 <h1 class="article-h1">{{ post.title }}</h1>
-                <p class="blog-author">
+                <p class="blog-author mt-3 mb-5 border-dark border-bottom">
-                    <span>By</span>
+                    <span>{{ __('Autor', 'Sindikatua')}}:</span>
                     <a href="{{ post.author.path }}">{{ post.author.name }}</a>
                     <span>&bull;</span>
                     <time datetime="{{ post.date|date('Y-m-d H:i:s') }}">{{ post.date }}</time>
                 </p>
+
                 <div class="article-body">{{ post.content }}</div>
             </section>
-            <section class="comment-box">
+            
+            <!-- comments -->
+            <section class="comment-box mt-5 p-2 border-dark border-top">
                 <div class="comments">
                     {% if post.comments %}
-                        <h3>comments</h3>
+                        <!-- <h2>Comentarios</h2>  -->
+                        
                         {% for cmt in post.comments %}
                             {% include 'partials/comment.twig' with {
                                 comment: cmt
@@ -27,7 +35,7 @@
                 </div>
 
                 {% if post.comment_status == 'closed' %}
-                    <p>comments for this post are closed by gus</p>
+                    <p>{{ __('No se puede comentar', 'Sindikatua') }}</p>
                 {% else %}
                     {% include 'partials/comment-form.twig' %}
                 {% endif %}