ADD css

page.php

@@ -17,4 +17,6 @@ $context = Timber::context();
 
 $timber_post     = Timber::get_post();
 $context['post'] = $timber_post;
-Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
+//Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.twig' ), $context );
+
+Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig' ), $context );

src/StarterSite.php

@@ -29,6 +29,12 @@ class StarterSite extends Site {
 		add_filter( 'timber/twig/functions', [ $this, 'add_functions_to_twig' ] );
 		add_filter( 'timber/twig/environment/options', [ $this, 'update_twig_environment_options' ] );
 
+        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']);
+		
+
 		parent::__construct();
 	}
 
@@ -185,4 +191,174 @@ class StarterSite extends Site {
 
 		return $options;
 	}
+
+	//add svg files
+	public function add_svg_support($file_types) {
+        $new_filetypes = array();
+        $new_filetypes['svg'] = 'image/svg+xml';
+        $file_types = array_merge($file_types, $new_filetypes);
+        return $file_types;
+    }
+
+	//section "portada"
+	private function getBotonesImagen() {
+		$botones = [];
+		
+		for ($i = 1; $i <= 4; $i++) {
+			$imagen = get_field('imagen_boton_' . $i);
+			$enlace = get_field('enlace_boton_' . $i);
+		
+			$botones[] = [
+				'imagen' => $imagen,
+				'enlace' => $enlace,
+			];
+		}
+		
+		return $botones;
+	}
+
+	//Get last 3 articles with category "noticias"
+	private function recentPostsNews() {
+		return Timber::get_posts([
+			'post_type' => 'post',
+			'posts_per_page' => 3,
+			'category_name' => 'noticias',
+			'post_status' => 'publish'
+		]);
+	}
+
+	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');
+			
+			if ($img || $url) {
+				$icons_rrss[] = [
+					'imagen' => $img,
+					'url' => $url
+				];
+			}
+		}
+
+		return $icons_rrss;
+	}
+
+	private function getLogosHeader ($max_logos = 2) {
+		$logos = [];
+    
+		for ($i = 1; $i <= $max_logos; $i++) {
+			$logoHeader = get_field('logo_header_' . $i, 'option');
+			$textoHeader = get_field('texto_header_' . $i, 'option');
+		
+			if ($logoHeader || $textoHeader) {
+				$logos[] = [
+					'logo' => $logoHeader,
+					'texto' => $textoHeader
+				];
+			}
+		}
+		
+		return $logos;
+		
+	}
+
+	private function getVideosCarousel($cantidad = 2) {
+		return Timber::get_posts([
+			'post_type' => 'videos',
+			'posts_per_page' => $cantidad,
+			'post_status' => 'publish',
+			'orderby' => 'date',
+			'order' => 'DESC'
+		]);
+	}
+
+	private function getUltimoArticuloOpinion() {
+		return Timber::get_posts([
+			'post_type' => 'opinion',
+			'posts_per_page' => 1,
+			'post_status' => 'publish',
+			'orderby' => 'date',
+			'order' => 'DESC'
+		]);
+	}
+
+	// Añadir en functions.php si no la tienes ya
+	// private function obtener_youtube_id($url) {
+	// 	$pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/';
+	// 	preg_match($pattern, $url, $matches);
+	// 	return isset($matches[1]) ? $matches[1] : false;
+	// }
+
+	// 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)) {
+			return false;
+		}
+		
+		// YouTube
+		if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) {
+			//error_log('es un vídeo de youtube'); // Debug
+			preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $url, $matches);
+
+			if (!empty($matches[1])) {
+				$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'
+				];
+				
+				//error_log('Embed URL generada: ' . $embed_data['embed_url']);
+				return $embed_data;
+			} else {
+				error_log('No se pudo extraer ID de YouTube');
+			}
+		}
+		
+		// Vimeo
+		if (strpos($url, 'vimeo.com') !== false) {
+			preg_match('/vimeo\.com\/(\d+)/', $url, $matches);
+			if (!empty($matches[1])) {
+				return [
+					'platform' => 'vimeo',
+					'embed_url' => 'https://player.vimeo.com/video/' . $matches[1] . '?title=0&byline=0&portrait=0',
+					'allow' => 'autoplay; fullscreen; picture-in-picture'
+				];
+			}
+		}
+		
+		// Si no se reconoce la plataforma
+		return [
+			'platform' => 'generic',
+			'embed_url' => $url,
+			'allow' => 'fullscreen'
+		];
+	}
+
+	// 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
+		$twig->addFunction(new \Twig\TwigFunction('generar_embed', [$this, 'generar_embed_universal']));
+		return $twig;
+	}
+
+	//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['redes_sociales'] = $this->getIconsRRSS();
+		$context['logos_header'] = $this->getLogosHeader();
+		$context['videos_carousel'] = $this->getVideosCarousel();
+		$context['ultimo_articulo_opinion'] = $this->getUltimoArticuloOpinion();
+		
+        return $context;
+    }
+
 }

style.css

@@ -1,23 +1,35 @@
 /*
  * Theme Name: CNT Sindiaktua
  * Description: Tema Timber de nexos
- * Author: Timber Team and You!
+ * Author: nexos estudios
 */
+@font-face {
+    font-family: 'Yaro';
+    src: url('assets/fonts/yaro-font-family/YaroSt-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
 
-/* .effect-nav > .nav-link:hover {
-  border-top: 4px solid rgb(255, 0, 0);
-  border-bottom: 4px solid rgb(0, 0, 0);
-  padding: 6px 0; 
-} */
 
 @media (min-width: 992px) {
-    .dropdown:hover .dropdown-menu {
+    .menu-bar .dropdown:hover .dropdown-menu {
         display: block;
         margin-top: 0;
     }
 }
 
-/* Optional: Add transition effects */
+/* menu-burger */
+.menu-burger .offcanvas {
+    background: linear-gradient(135deg,rgba(204,29,26,0.9),#cc1d1a);
+}
+
+.menu-burger .dropdown:hover .dropdown-menu {
+    display: block;
+    margin-top: 0;
+}
+
+/* transition effects both menus*/
 .dropdown-menu {
     transition: opacity 0.3s ease;
     opacity: 0;
@@ -28,4 +40,88 @@
 }
 
 
+/* CSS cards 'noticias' */
+.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%;
+    background: rgba(128, 128, 128, 0.8);
+    display: flex;
+    align-items: center;
+}
 
+.recent-posts .card-title, 
+.opinion-article .card-title {
+    color: white;
+    margin: 0;
+    font-weight: 600;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Número de líneas */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.recent-posts .card-title a, 
+.opinion-article .card-title a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.recent-posts .card-title a:hover {
+    color: #E30B16;
+}
+
+.card.secondary-article {
+    height: auto;
+}
+
+.recent-posts .card.secondary-article .card-title {
+    font-size: medium;
+}
+
+
+/* Responsive */
+@media (max-width: 768px) {
+    .card-img-overlay {
+        height: 18%;
+    }
+    
+    .card-title {
+        font-size: 0.9rem;
+    }
+}
+
+/* Convert SVG RRSS white */
+.svg-white {
+    filter: brightness(0) invert(1);
+}
+
+.svg-white:hover {
+    filter: none;
+}
+
+.btn-outline-white {
+    color: white;
+    border-color: white;
+    background-color: transparent;
+}
+
+.btn-outline-white:hover {
+    background-color: white;
+    border-color: white;
+}
+
+.svg-hover-white:hover {
+    filter: brightness(0) invert(1);
+}
+
+/* texto header sindikatua */
+.text-sindikatua {
+    font-family: 'Yaro', Arial, sans-serif;
+
+}

views/layouts/base.twig

@@ -7,23 +7,42 @@
     <body class="{{ body_class }}">
         {{ function('wp_body_open') }}
         <a class="skip-link screen-reader-text" href="#content">{{ _e('Skip to content') }}</a>
+
         <header class="header">
             {% block header %}
-                <div class="wrapper">
-                    <h1 class="hdr-logo">
-                        <a class="hdr-logo-link" href="{{ site.url }}">{{ site.name }}</a>
-                    </h1>
-                    <nav id="nav-main" class="nav-main">
-                        {% include 'partials/menu.twig' with {
-                            items: menu.get_items
-                        } %}
-                    </nav>
-                    <!-- #nav -->
+                <div class="container-fluid text-bg-light">
+                    {% include "partials/top-bar.twig" %}
+                </div>
+                <div class="container my-1">
+                    <div class="col-12">
+                        {% include "partials/logos-header.twig" %}
+                    </div>
+
+                    <!-- nav -->
+                    <div class="row align-items-center justify-content-around container-fluid bg-body-tertiary">
+                        <div class="col-7 col-md-10">
+                            <nav class="navbar navbar-expand-lg">
+                                <div class="container-fluid">
+                                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                                        {% include "partials/menu.twig" with {'items': menu.get_items} %}
+                                    </div>
+                                </div>
+                            </nav>
+                        </div>
+                        <div class="col-3 col-md-1 mt-2 mt-sm-0">
+                            {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
+                        </div>
+                        <div class="col-2 col-md-1">
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items} %}
+                        </div>
+                    </div>
+                    <!-- end nav -->
+
                 </div>
             {% endblock %}
         </header>
 
-        <section id="content" class="content-wrapper">
+        <section id="content" class="content-wrapper container">
             {% if title %}
                 <h1>{{ title }}</h1>
             {% endif %}
@@ -34,10 +53,14 @@
             </div>
         </section>
 
+        <!-- footer -->
         {% block footer %}
-            {% include 'partials/footer.twig' %}
-        {% endblock %}
-        {{ function('wp_footer') }}
-        {% do action('get_footer') %}
+			<footer id="footer" class="container-fluid text-bg-dark mt-5">
+			    {% include 'partials/footer.twig' %}		
+			</footer>
+			{{ function('wp_footer') }}
+            {% do action('get_footer') %}
+		{% endblock %}
+
     </body>
 </html>

views/partials/btn-search.twig

@@ -1,19 +1,16 @@
-<div class="container justify-content-center">
-    <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
-    <i class="bi bi-search"></i>
-    </button>
+<button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
+<i class="bi bi-search"></i>
+</button>
 
-    <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
-    <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body">
-        <form class="d-flex mt-3" role="search">
-            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
-            <button class="btn btn-outline-success" type="submit">Search</button>
-        </form>
-    </div>
-    </div>
+<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+<div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasTopLabel">Búsqueda</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 </div>
-
+<div class="offcanvas-body">
+    <form class="d-flex mt-3" role="search">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
+        <button class="btn btn-outline-success" type="submit">Search</button>
+    </form>
+</div>
+</div>

views/partials/footer.twig

@@ -1,26 +1,41 @@
-<div class="row">
-    
-    <div class="col-sm-3 mb-5">
-        <div class="px-lg-4"><img src="/wp-content/uploads/2025/07/logobehea.png" class="img-fluid" /></div>
-    </div>
-    <div class="col-sm-3">
-        {#{% include "menu.twig" with {'items': menu.get_items} %}#}
-    </div>
-    <div class="col-sm-3 mb-5">
-    
+<div class="container">
+    <div class="row py-2">
+        
+        <div class="col-sm-3 mb-1">
+            <div class=""><img src="/wp-content/uploads/2025/07/logobehea.png" class="img-fluid" /></div>
+            <div class="p-1">
+                <p>{{ footer_1 }}</p>
+                <p>{{ footer_2 }}</p>
+            </div>
+            <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-white pt-1" target="_blank" rel="noopener noreferrer">
+                        {% if red.imagen %}
+                            <img src="{{ red.imagen.url }}" alt="{{ red.imagen.alt }}" class="social-icon svg-white">
+                        {% else %}
+                            <i class="bi bi-globe"></i> {# Icono por defecto si no hay imagen #}
+                        {% endif %}
+                    </a>
+                {% endfor %}
+                </a>
+            </div>
+        </div>
+        <div class="col-sm-3">
+            {#<p>{{ dump() }}</p>
+            {% include "menu.twig" with {'items': menu.get_items} %}#}
+        </div>
+        <div class="col-sm-3 mb-5">
+        
+            
+        </div>
+        <div class="col-sm-3">
+            <h2>Contactos</h2>
+        </div>
         
     </div>
-    <div class="col-sm-3">
-        <p>Paseo de las Acacias 5,<br>Bilbao</p>
-        <p><a href="tel:+34666666666">(+34) 6666666</a></p>
-        <p>cnt @ cnt.org</p>
+    <div class="py-2 text-center">
+        <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>
     </div>
-    
-</div>
-<div class="py-2 text-center">
-    <p class="mb-0 fs-8">&bullet; Todos los derechos reservados &bullet; {{"now"|date('Y')}}</p>
-    <ul class="navbar-nav">
-        <li class="nav-item"><a class="nav-link" href="/politica-de-privacidad">Aviso legal y política de privacidad</a></li>
-        <li class="nav-item"><a class="nav-link" href="/politica-de-cookies">Política de cookies</a></li>
-    </ul>
-</div>
+</div>

views/partials/logos-header.twig

@@ -0,0 +1,31 @@
+{# 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">
+                        <img src="{{ logo.logo.sizes.medium }}"
+                            alt="{{ logo.logo.alt }}"
+                            class="img-fluid mb-2 mb-sm-0 mb-md-2 mb-lg-0 me-sm-3 me-md-0 me-lg-3"
+                            style="max-height: 100px; flex-shrink: 0;">
+                        <h1 class="mb-0 text-center text-sindikatua text-uppercase">{{ logo.texto }}</h1>
+                    </div>
+                </div>
+            {% else %}
+                {# Segunda columna #}
+                <div class="col-lg-7 col-12">
+                    <div class="d-flex align-items-center justify-content-center justify-content-md-start h-100">
+                        <img src="{{ logo.logo.sizes.large }}"
+                            alt="{{ logo.logo.alt }}"
+                            class="img-fluid"
+                            style="max-width: 100%; height: auto;">
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endif %}
+</a>

views/partials/menu-burger.twig

@@ -1,6 +1,6 @@
 {% if menu %}
-<nav class="navbar justify-content-center">
-    <a class="navbar-brand" href="#"></a>
+<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">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -15,17 +15,17 @@
 			{% 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 text-light" 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" href="{{ subitem.link }}">{{subitem.title}}</a></li>
+							<li><a class="dropdown-item text-dark" href="{{ subitem.link }}">{{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 text-light" href="{{ item.link }}">
 						{{ item.title }}
 					</a>
 					{% include 'partials/menu.twig' with {items: item.children} %}

views/partials/menu.twig

@@ -1,5 +1,5 @@
 {% if menu %}
-	<ul class="navbar-nav container">
+	<ul class="navbar-nav container menu-bar">
 		{% for item in items %}
 			{% if (item.children) %}
 				<li class="nav-item dropdown effect-nav">

views/partials/section-videos copy.twig

@@ -0,0 +1,101 @@
+<section class="py-5">
+    <div class="container">
+        <div class="row align-items-center">
+
+            {# Primera columna - Carousel con vídeos embebidos SIN extraer ID #}
+            <div class="col-lg-8 col-12 mb-4 mb-lg-0">
+                <h2 class="mb-4">Últimos Vídeos</h2>
+                
+                
+                {% if videos_carousel %}
+                <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
+                    <div class="carousel-inner">
+                        {% for video in videos_carousel %}
+                        <div class="carousel-item {% if loop.first %}active{% endif %}">
+                            <div class="video-container">
+                            {% set url_video = video.meta('url_video') %}
+                            {% set video_data = generar_embed(url_video) %}
+
+                                {% if video_data  %}
+                                    {# Vídeo embebido de YouTube #}
+                                    <div class="ratio ratio-16x9">
+                                        <iframe src="{{ video_data.embed_url }}" 
+                                                title="{{ video.titulo }}"
+                                                frameborder="0"
+                                                allow="{{ video_data.allow }}"
+                                                allowfullscreen>
+                                        </iframe>
+                                    </div>
+                                    
+                                    {# Título del vídeo debajo #}
+                                    <div class="carousel-caption d-none d-md-block">
+                                        <h5 class="mb-0">{{ video.titulo }}</h5>
+                                    </div>
+                                    
+                                {% else %}
+                                    {# Fallback si no hay URL #}
+                                    <div class="alert alert-warning text-center">
+                                        <h5>{{ video.titulo }}</h5>
+                                        <p class="mb-0">No se ha configurado URL para este vídeo.</p>
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    
+                    {# Controles del carousel (solo si hay más de un vídeo) #}
+                    {% 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>
+                        
+                        {# Indicadores #}
+                        <div class="carousel-indicators">
+                            {% for video in videos_carousel %}
+                            <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 %}
+                    <div class="alert alert-info">
+                        <p class="mb-0">No hay vídeos disponibles.</p>
+                    </div>
+                {% 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>
+                                </div>
+                            {% endfor %}
+                        </div>
+                {% else %}
+                    <p class="text-muted">No hay artículos de opinión disponibles.</p>
+                {% endif %}
+            </div>
+            
+        </div>
+    </div>
+</section>

views/partials/section-videos.twig

@@ -0,0 +1,97 @@
+<section class="py-5">
+    <div class="container">
+        <div class="row align-items-center">
+
+            {# Primera columna - Carousel con vídeos embebidos #}
+            <div class="col-lg-8 col-12 mb-4 mb-lg-0">
+                <h2 class="mb-4">Últimos Vídeos</h2>
+                
+                {% if videos_carousel %}
+                    <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
+                        <div class="carousel-inner">
+                            {% 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 %}
+                                                            <div class="ratio ratio-1x1">
+                                                                <iframe src="{{ video_data.embed_url }}" 
+                                                                        title="{{ video.titulo }}"
+                                                                        frameborder="0"
+                                                                        allow="{{ video_data.allow }}"
+                                                                        allowfullscreen>
+                                                                </iframe>
+                                                            </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>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </div>
+                                </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>
+                {% else %}
+                    <p class="text-muted">No hay artículos de opinión disponibles.</p>
+                {% endif %}
+            </div>
+            
+        </div>
+    </div>
+</section>

views/partials/top-bar.twig

@@ -1,25 +1,34 @@
-<div class="container-fluid">
+<div class="container">
     <div class="row align-items-center py-1">
         <!-- Izquierda: Botones -->
         <div class="col">
             <div class="btn-bar d-flex align-items-center">
-                <button class="btn btn-outline-light btn-sm me-2">
+                <button class="btn btn-outline-dark btn-sm me-2">
+                    <span class="d-inline d-sm-none">EUS</span>
                     <span class="d-none d-sm-inline">EUSKERA</span>
                 </button>
-                <button class="btn btn-outline-light btn-sm">
+                <button class="btn btn-outline-dark btn-sm">
+                    <span class="d-inline d-sm-none">CAS</span>
                     <span class="d-none d-sm-inline">CASTELLANO</span>
                 </button>
             </div>
         </div>
-        
-        <!-- Derecha: Redes sociales -->
+
+        <!-- Right side: RRSS -->
         <div class="col d-flex justify-content-end">
             <div class="btn-group m-1" role="group" aria-label="First group">
-                <button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-facebook"></i></button>
-                <button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-twitter-x"></i></button>
-                <button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-youtube"></i></button>
-                <button type="button" class="btn btn-outline-secondary btn-sm"><i class="bi bi-instagram"></i></button>
+                    {% for red in redes_sociales %}
+                    <a href="{{ red.url }}" class="btn btn-outline-dark btn-sm pt-0" target="_blank" rel="noopener noreferrer">
+                        {% if red.imagen %}
+                            <img src="{{ red.imagen.url }}" alt="{{ red.imagen.alt }}" class="social-icon pt-1 svg-hover-white">
+                        {% else %}
+                            <i class="bi bi-globe"></i> {# Icono por defecto si no hay imagen #}
+                        {% endif %}
+                    </a>
+                {% endfor %}
+                </a>
             </div>
         </div>
+
     </div>
 </div>

views/templates/page-enlaces.twig

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

views/templates/page-noticias.twig

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

views/templates/page-portada.twig

@@ -0,0 +1,74 @@
+{% extends 'layouts/base.twig' %}
+{% block content %}
+
+    {# Sección noticias #}
+    {% if recent_posts_noticias %}
+    <section class="recent-posts">
+        <div class="row g-4 mt-3">
+            {# Columna izquierda - Artículo principal #}
+            <div class="col-md-8">
+                {% set main_article = recent_posts_noticias[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 " />
+                    <div class="card-img-overlay">
+                        <h3 class="card-title text-wrap">
+                            <a href="{{ main_article.link }}">{{ main_article.title }}</a>
+                        </h3>
+                    </div>
+                </div>
+            </div>
+
+            {# Columna derecha - Dos artículos secundarios #}
+            <div class="col-md-4">
+                <div class="d-flex flex-column h-100 justify-content-between">
+                    {% for article in recent_posts_noticias[1:3] %}
+                        <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>
+                        </div>
+                    {% endfor %}
+                </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 #}
+    {% include 'partials/section-videos.twig' %}
+
+    {# Sección Campañas / conlfictos #}
+    <h2> Sección Campañas / conflictos</h2>
+
+
+
+
+{% endblock %}

views/templates/page-videos.twig

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