MODIF backend segundo idioma

ADD segundo idioma
MODIFY Styles
2025-08-21 07:21:55 +00:00 · 2025-08-21 07:21:36 +00:00 · 2025-08-13 08:59:42 +00:00 · 2025-08-13 08:59:26 +00:00 · 2025-08-13 08:58:35 +00:00 · 2025-08-07 12:06:10 +00:00
118 changed files with 3359 additions and 134 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,4 @@
+/.gitattributes export-ignore
+/.github export-ignore
+/tests export-ignore
+/phpunit.xml
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,35 @@
+<!--
+First off, hello!
+
+Thanks for submitting a PR. We love/welcome PRs (especially if it's your first).
+-->
+
+<!-- Remove this if no related tickets exist. -->
+<!-- You can add the related ticket numbers here using #. Example: #2471 -->
+Related:
+
+- Ticket 1
+- Ticket 2
+
+## Issue
+<!-- Description of the problem that this code change is solving -->
+
+
+## Solution
+<!-- Description of the solution that this code changes are introducing to the application. -->
+
+
+## Impact
+<!-- What impact will this have on the current codebase, performance, backwards compatibility? -->
+
+
+## Usage Changes
+<!-- Are there are any usage changes that we need to know about? If so, list them here so that we can integrate it in the release notes and developers know what usage changes are associated to your PR.
+-->
+
+## Considerations
+<!-- As we do not live in an ideal world it's worth to share your thought on how we could make the solution even better. -->
+
+
+## Testing
+<!-- Are unit tests included? If they need to be written, please provide pseudo code for a scenario that fails without your code, but succeeds with it -->
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -0,0 +1,76 @@
+name: Timber starter theme tests
+
+on:
+  push:
+    branches:
+      - '1.x'
+      - '2.x'
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+# Cancel previous workflow run groups that have not completed.
+concurrency:
+  # Group workflow runs by workflow name, along with the head branch ref of the pull request
+  # or otherwise the branch or tag ref.
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  phpunit:
+    runs-on: ubuntu-latest
+
+    continue-on-error: ${{ matrix.experimental }}
+    strategy:
+      fail-fast: false
+      matrix:
+        php: ['8.1', '8.2']
+        wp: ['latest']
+        multisite: ['0', '1']
+        extensions: ['gd']
+        experimental: [false]
+        include:
+          # PHP 8.2 / experimental
+          - php: '8.2'
+            wp: 'trunk'
+            dependency-version: 'highest'
+            multisite: '0'
+            experimental: true
+          # PHP 8.3 / experimental
+          - php: '8.3'
+            wp: 'trunk'
+            dependency-version: 'highest'
+            multisite: '0'
+            experimental: true
+          # Coverage
+          - php: '8.1'
+            wp: 'latest'
+            dependency-version: 'highest'
+            multisite: '0'
+            experimental: false
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php }}
+          tools: composer:v2
+          extensions: curl, date, dom, iconv, json, libxml, gd
+
+      - name: Setup problem matchers for PHP
+        run: echo "::add-matcher::${{ runner.tool_cache }}/php.json"
+
+      - name: Setup problem matchers for PHPUnit
+        run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
+
+      - uses: ramsey/composer-install@v3
+
+      - name: Run tests
+        run: composer run test
+        env:
+          WP_MULTISITE: ${{ matrix.multisite }}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+/composer.lock
+/vendor/
+/wordpress/
+.phpunit.result.cache
--- a/assets/fonts/yaro-font-family/YaroCut-Black.eot
+++ b/assets/fonts/yaro-font-family/YaroCut-Black.eot
--- a/assets/fonts/yaro-font-family/YaroCut-Black.ttf
+++ b/assets/fonts/yaro-font-family/YaroCut-Black.ttf
--- a/assets/fonts/yaro-font-family/YaroCut-Black.woff
+++ b/assets/fonts/yaro-font-family/YaroCut-Black.woff
--- a/assets/fonts/yaro-font-family/YaroCut-Black.woff2
+++ b/assets/fonts/yaro-font-family/YaroCut-Black.woff2
--- a/assets/fonts/yaro-font-family/YaroCut-Bold.eot
+++ b/assets/fonts/yaro-font-family/YaroCut-Bold.eot
--- a/assets/fonts/yaro-font-family/YaroCut-Bold.ttf
+++ b/assets/fonts/yaro-font-family/YaroCut-Bold.ttf
--- a/assets/fonts/yaro-font-family/YaroCut-Bold.woff
+++ b/assets/fonts/yaro-font-family/YaroCut-Bold.woff
--- a/assets/fonts/yaro-font-family/YaroCut-Bold.woff2
+++ b/assets/fonts/yaro-font-family/YaroCut-Bold.woff2
--- a/assets/fonts/yaro-font-family/YaroCut-Thin.eot
+++ b/assets/fonts/yaro-font-family/YaroCut-Thin.eot
--- a/assets/fonts/yaro-font-family/YaroCut-Thin.ttf
+++ b/assets/fonts/yaro-font-family/YaroCut-Thin.ttf
--- a/assets/fonts/yaro-font-family/YaroCut-Thin.woff
+++ b/assets/fonts/yaro-font-family/YaroCut-Thin.woff
--- a/assets/fonts/yaro-font-family/YaroCut-Thin.woff2
+++ b/assets/fonts/yaro-font-family/YaroCut-Thin.woff2
--- a/assets/fonts/yaro-font-family/YaroCut.eot
+++ b/assets/fonts/yaro-font-family/YaroCut.eot
--- a/assets/fonts/yaro-font-family/YaroCut.ttf
+++ b/assets/fonts/yaro-font-family/YaroCut.ttf
--- a/assets/fonts/yaro-font-family/YaroCut.woff
+++ b/assets/fonts/yaro-font-family/YaroCut.woff
--- a/assets/fonts/yaro-font-family/YaroCut.woff2
+++ b/assets/fonts/yaro-font-family/YaroCut.woff2
--- a/assets/fonts/yaro-font-family/YaroOp-Black.eot
+++ b/assets/fonts/yaro-font-family/YaroOp-Black.eot
--- a/assets/fonts/yaro-font-family/YaroOp-Black.ttf
+++ b/assets/fonts/yaro-font-family/YaroOp-Black.ttf
--- a/assets/fonts/yaro-font-family/YaroOp-Black.woff
+++ b/assets/fonts/yaro-font-family/YaroOp-Black.woff
--- a/assets/fonts/yaro-font-family/YaroOp-Black.woff2
+++ b/assets/fonts/yaro-font-family/YaroOp-Black.woff2
--- a/assets/fonts/yaro-font-family/YaroOp-Bold.eot
+++ b/assets/fonts/yaro-font-family/YaroOp-Bold.eot
--- a/assets/fonts/yaro-font-family/YaroOp-Bold.ttf
+++ b/assets/fonts/yaro-font-family/YaroOp-Bold.ttf
--- a/assets/fonts/yaro-font-family/YaroOp-Bold.woff
+++ b/assets/fonts/yaro-font-family/YaroOp-Bold.woff
--- a/assets/fonts/yaro-font-family/YaroOp-Bold.woff2
+++ b/assets/fonts/yaro-font-family/YaroOp-Bold.woff2
--- a/assets/fonts/yaro-font-family/YaroOp-Thin.eot
+++ b/assets/fonts/yaro-font-family/YaroOp-Thin.eot
--- a/assets/fonts/yaro-font-family/YaroOp-Thin.ttf
+++ b/assets/fonts/yaro-font-family/YaroOp-Thin.ttf
--- a/assets/fonts/yaro-font-family/YaroOp-Thin.woff
+++ b/assets/fonts/yaro-font-family/YaroOp-Thin.woff
--- a/assets/fonts/yaro-font-family/YaroOp-Thin.woff2
+++ b/assets/fonts/yaro-font-family/YaroOp-Thin.woff2
--- a/assets/fonts/yaro-font-family/YaroOp.eot
+++ b/assets/fonts/yaro-font-family/YaroOp.eot
--- a/assets/fonts/yaro-font-family/YaroOp.ttf
+++ b/assets/fonts/yaro-font-family/YaroOp.ttf
--- a/assets/fonts/yaro-font-family/YaroOp.woff
+++ b/assets/fonts/yaro-font-family/YaroOp.woff
--- a/assets/fonts/yaro-font-family/YaroOp.woff2
+++ b/assets/fonts/yaro-font-family/YaroOp.woff2
--- a/assets/fonts/yaro-font-family/YaroRg-Black.eot
+++ b/assets/fonts/yaro-font-family/YaroRg-Black.eot
--- a/assets/fonts/yaro-font-family/YaroRg-Black.ttf
+++ b/assets/fonts/yaro-font-family/YaroRg-Black.ttf
--- a/assets/fonts/yaro-font-family/YaroRg-Black.woff
+++ b/assets/fonts/yaro-font-family/YaroRg-Black.woff
--- a/assets/fonts/yaro-font-family/YaroRg-Black.woff2
+++ b/assets/fonts/yaro-font-family/YaroRg-Black.woff2
--- a/assets/fonts/yaro-font-family/YaroRg-Bold.eot
+++ b/assets/fonts/yaro-font-family/YaroRg-Bold.eot
--- a/assets/fonts/yaro-font-family/YaroRg-Bold.ttf
+++ b/assets/fonts/yaro-font-family/YaroRg-Bold.ttf
--- a/assets/fonts/yaro-font-family/YaroRg-Bold.woff
+++ b/assets/fonts/yaro-font-family/YaroRg-Bold.woff
--- a/assets/fonts/yaro-font-family/YaroRg-Bold.woff2
+++ b/assets/fonts/yaro-font-family/YaroRg-Bold.woff2
--- a/assets/fonts/yaro-font-family/YaroRg-Thin.eot
+++ b/assets/fonts/yaro-font-family/YaroRg-Thin.eot
--- a/assets/fonts/yaro-font-family/YaroRg-Thin.ttf
+++ b/assets/fonts/yaro-font-family/YaroRg-Thin.ttf
--- a/assets/fonts/yaro-font-family/YaroRg-Thin.woff
+++ b/assets/fonts/yaro-font-family/YaroRg-Thin.woff
--- a/assets/fonts/yaro-font-family/YaroRg-Thin.woff2
+++ b/assets/fonts/yaro-font-family/YaroRg-Thin.woff2
--- a/assets/fonts/yaro-font-family/YaroRg.eot
+++ b/assets/fonts/yaro-font-family/YaroRg.eot
--- a/assets/fonts/yaro-font-family/YaroRg.ttf
+++ b/assets/fonts/yaro-font-family/YaroRg.ttf
--- a/assets/fonts/yaro-font-family/YaroRg.woff
+++ b/assets/fonts/yaro-font-family/YaroRg.woff
--- a/assets/fonts/yaro-font-family/YaroRg.woff2
+++ b/assets/fonts/yaro-font-family/YaroRg.woff2
--- a/assets/fonts/yaro-font-family/YaroSt-Black.eot
+++ b/assets/fonts/yaro-font-family/YaroSt-Black.eot
--- a/assets/fonts/yaro-font-family/YaroSt-Black.ttf
+++ b/assets/fonts/yaro-font-family/YaroSt-Black.ttf
--- a/assets/fonts/yaro-font-family/YaroSt-Black.woff
+++ b/assets/fonts/yaro-font-family/YaroSt-Black.woff
--- a/assets/fonts/yaro-font-family/YaroSt-Black.woff2
+++ b/assets/fonts/yaro-font-family/YaroSt-Black.woff2
--- a/assets/fonts/yaro-font-family/YaroSt-Bold.eot
+++ b/assets/fonts/yaro-font-family/YaroSt-Bold.eot
--- a/assets/fonts/yaro-font-family/YaroSt-Bold.ttf
+++ b/assets/fonts/yaro-font-family/YaroSt-Bold.ttf
--- a/assets/fonts/yaro-font-family/YaroSt-Bold.woff
+++ b/assets/fonts/yaro-font-family/YaroSt-Bold.woff
--- a/assets/fonts/yaro-font-family/YaroSt-Bold.woff2
+++ b/assets/fonts/yaro-font-family/YaroSt-Bold.woff2
--- a/assets/fonts/yaro-font-family/YaroSt-Thin.eot
+++ b/assets/fonts/yaro-font-family/YaroSt-Thin.eot
--- a/assets/fonts/yaro-font-family/YaroSt-Thin.ttf
+++ b/assets/fonts/yaro-font-family/YaroSt-Thin.ttf
--- a/assets/fonts/yaro-font-family/YaroSt-Thin.woff
+++ b/assets/fonts/yaro-font-family/YaroSt-Thin.woff
--- a/assets/fonts/yaro-font-family/YaroSt-Thin.woff2
+++ b/assets/fonts/yaro-font-family/YaroSt-Thin.woff2
--- a/assets/fonts/yaro-font-family/YaroSt.eot
+++ b/assets/fonts/yaro-font-family/YaroSt.eot
--- a/assets/fonts/yaro-font-family/YaroSt.ttf
+++ b/assets/fonts/yaro-font-family/YaroSt.ttf
--- a/assets/fonts/yaro-font-family/YaroSt.woff
+++ b/assets/fonts/yaro-font-family/YaroSt.woff
--- a/assets/fonts/yaro-font-family/YaroSt.woff2
+++ b/assets/fonts/yaro-font-family/YaroSt.woff2
--- a/assets/fonts/yaro-font-family/demo.html
+++ b/assets/fonts/yaro-font-family/demo.html
@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            position: relative;
+            padding: 9px;
+            margin: 0 0 10px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        pre:after {
+            display: block;
+            position: absolute;
+            right: 0;
+            top: 0;
+            content: 'Usage';
+            line-height: 1;
+            padding: 5px 8px;
+            font-size: 12px;
+            color: #767676;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-right: none;
+            border-top: none;
+            border-radius: 0 4px 0 4px;
+            z-index: 10;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'Yaro St'; font-weight: 100; font-style: normal;">Yaro St Thin</h1>
+        <pre>.your-style {
+    font-family: 'Yaro St';
+    font-weight: 100;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro St'; font-weight: 100; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Cut'; font-weight: 900; font-style: normal;">Yaro Cut Black</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Cut';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Cut'; font-weight: 900; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro St'; font-weight: normal; font-style: normal;">Yaro St</h1>
+        <pre>.your-style {
+    font-family: 'Yaro St';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro St'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro St'; font-weight: 900; font-style: normal;">Yaro St Black</h1>
+        <pre>.your-style {
+    font-family: 'Yaro St';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro St'; font-weight: 900; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Rg'; font-weight: normal; font-style: normal;">Yaro Rg</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Rg';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Rg'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Rg'; font-weight: 100; font-style: normal;">Yaro Rg Thin</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Rg';
+    font-weight: 100;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Rg'; font-weight: 100; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Rg'; font-weight: bold; font-style: normal;">Yaro Rg Bold</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Rg';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Rg'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Op'; font-weight: bold; font-style: normal;">Yaro Op Bold</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Op';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Op'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro St'; font-weight: bold; font-style: normal;">Yaro St Bold</h1>
+        <pre>.your-style {
+    font-family: 'Yaro St';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro St'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Op'; font-weight: 900; font-style: normal;">Yaro Op Black</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Op';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Op'; font-weight: 900; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Cut'; font-weight: 100; font-style: normal;">Yaro Cut Thin</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Cut';
+    font-weight: 100;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Cut'; font-weight: 100; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Op'; font-weight: 100; font-style: normal;">Yaro Op Thin</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Op';
+    font-weight: 100;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Op'; font-weight: 100; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Rg'; font-weight: 900; font-style: normal;">Yaro Rg Black</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Rg';
+    font-weight: 900;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Rg'; font-weight: 900; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Cut'; font-weight: bold; font-style: normal;">Yaro Cut Bold</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Cut';
+    font-weight: bold;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Cut'; font-weight: bold; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Cut'; font-weight: normal; font-style: normal;">Yaro Cut</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Cut';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Cut'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+    <div class="demo">
+        <h1 style="font-family: 'Yaro Op'; font-weight: normal; font-style: normal;">Yaro Op</h1>
+        <pre>.your-style {
+    font-family: 'Yaro Op';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <div class="font-container" style="font-family: 'Yaro Op'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#<>$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/assets/fonts/yaro-font-family/stylesheet.css
+++ b/assets/fonts/yaro-font-family/stylesheet.css
@ -0,0 +1,192 @@
+@font-face {
+    font-family: 'Yaro St';
+    src: url('YaroSt-Thin.eot');
+    src: local('Yaro St Thin'), local('YaroSt-Thin'),
+        url('YaroSt-Thin.eot?#iefix') format('embedded-opentype'),
+        url('YaroSt-Thin.woff2') format('woff2'),
+        url('YaroSt-Thin.woff') format('woff'),
+        url('YaroSt-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Cut';
+    src: url('YaroCut-Black.eot');
+    src: local('Yaro Cut Black'), local('YaroCut-Black'),
+        url('YaroCut-Black.eot?#iefix') format('embedded-opentype'),
+        url('YaroCut-Black.woff2') format('woff2'),
+        url('YaroCut-Black.woff') format('woff'),
+        url('YaroCut-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro St';
+    src: url('YaroSt.eot');
+    src: local('Yaro St'), local('YaroSt'),
+        url('YaroSt.eot?#iefix') format('embedded-opentype'),
+        url('YaroSt.woff2') format('woff2'),
+        url('YaroSt.woff') format('woff'),
+        url('YaroSt.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro St';
+    src: url('YaroSt-Black.eot');
+    src: local('Yaro St Black'), local('YaroSt-Black'),
+        url('YaroSt-Black.eot?#iefix') format('embedded-opentype'),
+        url('YaroSt-Black.woff2') format('woff2'),
+        url('YaroSt-Black.woff') format('woff'),
+        url('YaroSt-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Rg';
+    src: url('YaroRg.eot');
+    src: local('Yaro Rg'), local('YaroRg'),
+        url('YaroRg.eot?#iefix') format('embedded-opentype'),
+        url('YaroRg.woff2') format('woff2'),
+        url('YaroRg.woff') format('woff'),
+        url('YaroRg.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Rg';
+    src: url('YaroRg-Thin.eot');
+    src: local('Yaro Rg Thin'), local('YaroRg-Thin'),
+        url('YaroRg-Thin.eot?#iefix') format('embedded-opentype'),
+        url('YaroRg-Thin.woff2') format('woff2'),
+        url('YaroRg-Thin.woff') format('woff'),
+        url('YaroRg-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Rg';
+    src: url('YaroRg-Bold.eot');
+    src: local('Yaro Rg Bold'), local('YaroRg-Bold'),
+        url('YaroRg-Bold.eot?#iefix') format('embedded-opentype'),
+        url('YaroRg-Bold.woff2') format('woff2'),
+        url('YaroRg-Bold.woff') format('woff'),
+        url('YaroRg-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Op';
+    src: url('YaroOp-Bold.eot');
+    src: local('Yaro Op Bold'), local('YaroOp-Bold'),
+        url('YaroOp-Bold.eot?#iefix') format('embedded-opentype'),
+        url('YaroOp-Bold.woff2') format('woff2'),
+        url('YaroOp-Bold.woff') format('woff'),
+        url('YaroOp-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro St';
+    src: url('YaroSt-Bold.eot');
+    src: local('Yaro St Bold'), local('YaroSt-Bold'),
+        url('YaroSt-Bold.eot?#iefix') format('embedded-opentype'),
+        url('YaroSt-Bold.woff2') format('woff2'),
+        url('YaroSt-Bold.woff') format('woff'),
+        url('YaroSt-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Op';
+    src: url('YaroOp-Black.eot');
+    src: local('Yaro Op Black'), local('YaroOp-Black'),
+        url('YaroOp-Black.eot?#iefix') format('embedded-opentype'),
+        url('YaroOp-Black.woff2') format('woff2'),
+        url('YaroOp-Black.woff') format('woff'),
+        url('YaroOp-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Cut';
+    src: url('YaroCut-Thin.eot');
+    src: local('Yaro Cut Thin'), local('YaroCut-Thin'),
+        url('YaroCut-Thin.eot?#iefix') format('embedded-opentype'),
+        url('YaroCut-Thin.woff2') format('woff2'),
+        url('YaroCut-Thin.woff') format('woff'),
+        url('YaroCut-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Op';
+    src: url('YaroOp-Thin.eot');
+    src: local('Yaro Op Thin'), local('YaroOp-Thin'),
+        url('YaroOp-Thin.eot?#iefix') format('embedded-opentype'),
+        url('YaroOp-Thin.woff2') format('woff2'),
+        url('YaroOp-Thin.woff') format('woff'),
+        url('YaroOp-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Rg';
+    src: url('YaroRg-Black.eot');
+    src: local('Yaro Rg Black'), local('YaroRg-Black'),
+        url('YaroRg-Black.eot?#iefix') format('embedded-opentype'),
+        url('YaroRg-Black.woff2') format('woff2'),
+        url('YaroRg-Black.woff') format('woff'),
+        url('YaroRg-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Cut';
+    src: url('YaroCut-Bold.eot');
+    src: local('Yaro Cut Bold'), local('YaroCut-Bold'),
+        url('YaroCut-Bold.eot?#iefix') format('embedded-opentype'),
+        url('YaroCut-Bold.woff2') format('woff2'),
+        url('YaroCut-Bold.woff') format('woff'),
+        url('YaroCut-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Cut';
+    src: url('YaroCut.eot');
+    src: local('Yaro Cut'), local('YaroCut'),
+        url('YaroCut.eot?#iefix') format('embedded-opentype'),
+        url('YaroCut.woff2') format('woff2'),
+        url('YaroCut.woff') format('woff'),
+        url('YaroCut.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Yaro Op';
+    src: url('YaroOp.eot');
+    src: local('Yaro Op'), local('YaroOp'),
+        url('YaroOp.eot?#iefix') format('embedded-opentype'),
+        url('YaroOp.woff2') format('woff2'),
+        url('YaroOp.woff') format('woff'),
+        url('YaroOp.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
--- a/assets/images/bannercnt.jpg
+++ b/assets/images/bannercnt.jpg
--- a/assets/images/logobehea.png
+++ b/assets/images/logobehea.png
--- a/assets/images/logoh.jpg
+++ b/assets/images/logoh.jpg
--- a/assets/scripts/site.js
+++ b/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
--- a/composer.json
+++ b/composer.json
@ -36,7 +36,10 @@
    }
  ],
  "require": {
-    "timber/timber": "^2.1"
+    "timber/timber": "^2.1",
+    "illuminate/collections": "^12.20",
+    "twbs/bootstrap": "^5.3",
+    "twbs/bootstrap-icons": "^1.13"
  },
  "require-dev": {
    "automattic/wordbless": "^0.4.2",
--- a/functions.php
+++ b/functions.php
@ -13,7 +13,6 @@ use Timber\Timber;

 // Load Composer dependencies.
 require_once __DIR__ . '/vendor/autoload.php';
-
 Timber::init();

 new StarterSite();
--- a/page.php
+++ b/page.php
@ -8,10 +8,27 @@
 * different template.
 */

-namespace App;
-
+/**namespace App;
 use Timber\Timber;
+$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( 'templates/page.twig', $context );
+//Timber::render( array( 'templates/page-' . $timber_post->post_name . '.twig', 'page.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);
+}
--- a/search.php
+++ b/search.php
@ -9,10 +9,6 @@ use Timber\Timber;

 $templates = [ 'templates/search.twig', 'templates/archive.twig', 'templates/index.twig' ];

-$context = Timber::context(
-	[
-		'title' => 'Search results for ' . get_search_query(),
-	]
-);
+$context = Timber::context([]);

 Timber::render( $templates, $context );
--- a/src/StarterSite.php
+++ b/src/StarterSite.php
@ -17,39 +17,55 @@ use Twig\TwigFilter;
 */
 class StarterSite extends Site {

-
-
-	/**
-	 * StarterSite constructor.
-	 */
 	public function __construct() {
 		add_action( 'after_setup_theme', [ $this, 'theme_supports' ] );
 		add_action( 'init', [ $this, 'register_post_types' ] );
 		add_action( 'init', [ $this, 'register_taxonomies' ] );
-
+		
+		add_action('wp_enqueue_scripts', [$this,'load_assets']);
+		
 		add_filter( 'timber/context', [ $this, 'add_to_context' ] );
 		add_filter( 'timber/twig/filters', [ $this, 'add_filters_to_twig' ] );
 		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_videos_embed_to_twig']); //videos embed
+		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();
 	}

-	/**
-	 * This is where you can register custom post types.
-	 */
+	
+	function load_assets() {
+         $version = 4;
+         // $version_for_app = $version;
+         $version_for_app = time();
+         wp_enqueue_style( 'yaro', get_template_directory_uri() . '/assets/fonts/yaro-font-family/stylesheet.css', [], $version, 'all');
+         wp_enqueue_style( 'twbs', get_template_directory_uri() . '/vendor/twbs/bootstrap/dist/css/bootstrap.min.css', [], $version, 'all');
+         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( 'twbs', get_template_directory_uri() . '/vendor/twbs/bootstrap/dist/js/bootstrap.min.js', [], $version, false);
+         wp_enqueue_script( 'lust', get_template_directory_uri() . '/assets/scripts/site.js', [], $version, false);
+    }
+
+
 	public function register_post_types() {}

-	/**
-	 * This is where you can register custom taxonomies.
-	 */
 	public function register_taxonomies() {}

-	/**
-	 * This is where you add some context.
-	 *
-	 * @param array $context context['this'] Being the Twig's {{ this }}
-	 */
 	public function add_to_context( $context ) {
 		$context['foo']   = 'bar';
 		$context['stuff'] = 'I am a value set in your functions.php file';
@ -183,4 +199,535 @@ 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();
+        $new_filetypes['svg'] = 'image/svg+xml';
+        $file_types = array_merge($file_types, $new_filetypes);
+        return $file_types;
+    }
+
+	//section "portada> ENLACES"
+	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, $page_id);
+			$enlace = get_field('enlace_boton_' . $i, $page_id);
+		
+			$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' => -1,
+			'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 getVideos() {
+		return Timber::get_posts([
+			'post_type' => 'videos',
+			'posts_per_page' => -1, // -1 = sin límite
+			'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'
+		]);
+
+		// $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;
+	}
+
+	private function getCampanaArticles() {
+		return Timber::get_posts([
+			'post_type' => 'campana',
+			'posts_per_page' => 1,
+			'post_status' => 'publish',
+			'orderby' => 'date',
+			'order' => 'DESC'
+		]);
+	}
+
+	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',
+					'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']);
+				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;
+	}
+
+	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(); //ENLACES
+		$context['redes_sociales'] = $this->getIconsRRSS();
+		$context['logos_header'] = $this->getLogosHeader();
+		$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;
+    }
+
 }
--- a/style.css
+++ b/style.css
@ -1,5 +1,558 @@
 /*
- * Theme Name: My Timber 2.x Starter Theme
- * Description: Starter Theme to use with Timber
- * Author: Timber Team and You!
+ * Theme Name: CNT Sindiaktua
+ * 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');
+    font-weight: 900;
+    font-style: normal;
+    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;
+        margin-top: 0;
+    }
+}
+
+/* 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;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+    opacity: 1;
+}
+
+/* PORTADA -> CARDS recent posts 'noticias' */
+.page-portada .recent-posts .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;
+}
+
+/* PORTADA -> CARDS OPINION */
+.page-portada .opinion-article .card-img-overlay {
+    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);
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* Número de líneas */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.page-portada .recent-posts .card-title a, 
+.page-portada .opinion-article .card-title a {
+    color: var(--white);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.page-portada .recent-posts .card-title a:hover {
+    color: var(--rojo-cnt);
+}
+
+.page-portada .recent-posts .card.secondary-article .card-title {
+    font-size: medium;
+}
+
+@media (max-width: 768px) {
+    .page-portada .recent-posts .card-img-overlay {
+        height: 18%;
+    }
+    
+    .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);
+}
+
+.svg-white:hover {
+    filter: none;
+}
+
+.btn-outline-white {
+    color: var(--white);
+    border-color: var(--white);
+    background-color: transparent;
+}
+
+.btn-outline-white:hover {
+    background-color: var(--white);
+    border-color: var(--white);
+}
+
+.svg-hover-white:hover {
+    filter: brightness(0) invert(1);
+}
+
+.active-acerca {
+    background-color: var(--rojo-cnt);
+}
+
+.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;
+}
--- a/views/layouts/base.twig
+++ b/views/layouts/base.twig
@ -7,37 +7,60 @@
    <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="align-items-center justify-content-around bg-body-tertiary d-none d-lg-flex">
+                        <div>
+                            <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>
+                            {% include "partials/btn-search.twig" with {'items': menu.get_items} %}
+                        </div> #}
+                        <div>
+                            {% include "partials/menu-burger.twig" with {'items': menu.get_items, 'burger_id': 'menu-burger-desktop'} %}
+                        </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 %}
            <div class="wrapper">
                {% block content %}
-                    Sorry, no content
+                    Lo siento, no hay contenido.
                {% endblock %}
            </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>
--- a/views/partials/breadcrumb.twig
+++ b/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>
--- a/views/partials/btn-search.twig
+++ b/views/partials/btn-search.twig
@ -0,0 +1,18 @@
+<section class="section-search">
+    <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 mt-3" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="max-height: 18vh;">
+        <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" method="get" action="/">
+                <input class="form-control me-2" type="search" name="s" placeholder="Buscar..." aria-label="Search"/>
+                <button class="btn btn-primary-cnt" type="submit">Buscar</button>
+            </form>
+        </div>
+    </div>
+</section>
--- a/views/partials/comment-form.twig
+++ b/views/partials/comment-form.twig
@ -1,32 +1,57 @@
-<div class="comment-form">
-    <h3>Add comment</h3>
-    <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
-        {% if user %}
-            <input type="hidden" name="email" value="{{ user.email }}" />
-            <input type="hidden" name="author" value="{{ user.name }}" />
-            <input type="hidden" name="url" value="{{ user.link }}" />
-        {% else %}
-            <label>
-                Email<br />
-                <input required name="email" type="email" id="email" />
-            </label>
-            <label>
-                Name<br />
-                <input required name="author" type="text" />
-            </label>
-            <label>
-                Website<br />
-                <input name="url" type="url" />
-            </label>
-        {% endif %}
-        <label>
-            Comment<br />
-            <textarea placeholder="Leave a comment..." name="comment" cols="60" rows="3"></textarea>
-        </label>
-        <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">Send</button>
-        <button type="reset">Cancel</button>
-        <p>Your comment will be revised by the site if needed.</p>
-    </form>
+<div class="comment-form my-5">
+    <p class="position-relative fs-4 fw-bold sp-module-title">Añadir Comentario</p>
+    
+    <div class="container mt-4">
+    <div class="row justify-content-center">
+        <div class="col-lg-6 col-md-8 col-12">
+            <form class="comment-form" method="post" action="{{ site.link ~ '/wp-comments-post.php' }}">
+                {% if user %}
+
+                    <div class="mb-3 row">
+                        <label for="nombre" class="form-label">Nombre</label>
+                        <input class="form-control form-control-sm" type="text" name="author" value="{{ user.name }}" />
+                    </div>
+
+                    <div class="mb-3 row">
+                        <label for="nombre" class="form-label">Email</label>
+                        <input class="form-control form-control-sm" type="email" name="email" value="{{ user.email }}" />
+                    </div>
+
+                    <input type="hidden" name="url" value="{{ user.link }}" />
+
+                {% else %}
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Email</label>
+                        <input class="form-control form-control-sm" required name="email" type="email" id="email" />
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="nombre" class="form-label">Nombre</label>
+                        <input class="form-control form-control-sm" required name="author" type="text" />
+                    </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>
--- a/views/partials/comment.twig
+++ b/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 {
--- a/views/partials/footer.twig
+++ b/views/partials/footer.twig
@ -1 +1,53 @@
-<footer id="footer">Copyright {{ 'now'|date('Y') }}</footer>
+<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">
+            {% if function('pll_current_language') == 'eu' %}
+                <h2>Kontaktua</h2>
+            {% else %}
+                <h2>Contactos</h2>
+            {% endif %}
+        </div>
+        
+    </div>
+    <div class="py-2 text-center mt-5 border-top border-light">
+        {% if function('pll_current_language') == 'eu' %}
+            <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>
+            <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>
--- a/views/partials/head.twig
+++ b/views/partials/head.twig
@ -4,6 +4,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="author" href="{{ site.theme.link }}/humans.txt" />
    <link rel="profile" href="http://gmpg.org/xfn/11" />
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
    {% do action('get_header') %}
    {{ function('wp_head') }}
 </head>
--- a/views/partials/logos-header.twig
+++ b/views/partials/logos-header.twig
@ -0,0 +1,39 @@
+{# Sección Logos #}
+
+{% 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-between">
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+                            <div class="d-flex align-items-center">
+                                <img src="{{ logo.logo.sizes.medium }}"
+                                    alt="{{ logo.logo.alt }}"
+                                    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 d-none d-lg-block">
+                    <div class="d-flex align-items-center justify-content-center justify-content-md-start h-100">
+                        <a class="navbar-brand d-block" href="{{site.url}}" rel="home">
+                            <img src="{{ logo.logo.sizes.large }}"
+                                alt="{{ logo.logo.alt }}"
+                                class="img-fluid"
+                                style="max-width: 100%; height: auto;">
+                        </a>
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endif %}
--- a/views/partials/menu-burger.twig
+++ b/views/partials/menu-burger.twig
@ -0,0 +1,57 @@
+{% 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="#{{ 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="{{ 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>
+      <div class="offcanvas-body">
+        <ul class="navbar-nav container-fluid justify-content-center">
+		{% for item in items %}
+			{% 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" 
+						{% 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" 
+								{% 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 }}"
+							{% 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} %}
+				</li>
+			{% endif %}
+		{% endfor %}
+	</ul>
+      </div>
+    </div>
+</nav>
+{% endif %}
+
--- a/views/partials/menu.twig
+++ b/views/partials/menu.twig
@ -1,12 +1,43 @@
 {% if menu %}
-    <ul>
-        {% for item in items %}
-            <li class="{{ item.classes|join(' ') }}">
-                <a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
-                {% include 'partials/menu.twig' with {
-                    items: item.children
-                } %}
-            </li>
-        {% endfor %}
-    </ul>
+	<ul class="navbar-nav container menu-bar">
+		{% for item in items %}
+			{% 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"
+						{% 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 }}"
+									{% 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 }}"
+							{% if item.xfn %}rel="{{ item.xfn }}"{% endif %} 
+							{% if item.target %}target="{{ item.target }}"{% endif %}>
+						{{ item.title }}
+					</a>
+					<div class="d-block d-lg-none">
+						{% include 'partials/menu.twig' with {items: item.children} %}
+					</div>
+				</li>
+			{% endif %}
+		{% endfor %}
+	</ul>
 {% endif %}
+
--- a/views/partials/pagination.twig
+++ b/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">
-                    <a href="{{ posts.pagination.pages|first.link }}">First</a>
+                <li class="first mx-2 border border-0">
+                    <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>
--- a/views/partials/section-videos.twig
+++ b/views/partials/section-videos.twig
@ -0,0 +1,153 @@
+
+<div class="row align-items-stretch">
+
+    {# Primera columna - Carousel con vídeos embebidos #}
+    <div class="col-lg-8 col-12 mb-4 mb-lg-0">
+        <h1 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Vídeos', 'Sindikatua')|upper }}</h1>
+
+        {% if videos %}
+            <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
+                <div class="carousel-inner">
+                {% for pair in videos|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 %}
+
+                                    {# 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 hay URL', 'Sindikatua') }}</p>
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        {% endif %}
+                        {% endfor %}
+                        </div>
+                    </div>
+                {% endfor %}
+                </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>
+
+    {# 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>
--- a/views/partials/tease-post.twig
+++ b/views/partials/tease-post.twig
@ -6,7 +6,7 @@
        {{
            post.excerpt({
                words: 5,
-                read_more: 'Keep reading'
+                read_more: 'Sigue leyendo'
            })
        }}
    </p>
--- a/views/partials/tease.twig
+++ b/views/partials/tease.twig
@ -1,9 +1,30 @@
-<article class="tease tease-{{ post.type }}" id="tease-{{ post.id }}">
-    {% block content %}
-        <h2 class="h2"><a href="{{ post.link }}">{{ post.title }}</a></h2>
-        <p>{{ post.excerpt }}</p>
-        {% if post.thumbnail %}
-            <img src="{{ post.thumbnail.src }}" />
-        {% endif %}
-    {% endblock %}
+<article class="tease tease-{{ post.type }} border border-black rounded my-3 p-2 position-relative" 
+    id="tease-{{ post.id }}"
+    style="padding-bottom: 65px !important;">
+        <div class="row align-items-center section-tease">
+            <!-- Columna izquierda: título y excerpt -->
+            <div class="col">
+                <h2 class="h2">
+                    <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>
--- a/views/partials/top-bar.twig
+++ b/views/partials/top-bar.twig
@ -0,0 +1,56 @@
+<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">
+            {% for lang in languages %}
+                {% if lang.slug == 'es' or lang.slug == 'cas' %}
+                    {# Botón Castellano #}
+                    <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">CAS</span>
+                        <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">
+                        {% 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 %}
+            </div>
+        </div>
+
+    </div>
+
+</div>
--- a/views/templates/404.twig
+++ b/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 %}
--- a/views/templates/page-afiliazioa.twig
+++ b/views/templates/page-afiliazioa.twig
@ -0,0 +1 @@
+{% extends 'templates/page-quieres-afiliarte.twig' %}
--- a/views/templates/page-berriak.twig
+++ b/views/templates/page-berriak.twig
@ -0,0 +1 @@
+{% extends 'templates/page-noticias.twig' %}
--- a/views/templates/page-bideoak.twig
+++ b/views/templates/page-bideoak.twig
@ -0,0 +1 @@
+{% extends 'templates/page-videos.twig' %}
--- a/views/templates/page-cnt-ri-buruz.twig
+++ b/views/templates/page-cnt-ri-buruz.twig
@ -0,0 +1 @@
+{% extends 'templates/single-acerca.twig' %}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
gustavo	2ab43d2615	MODIF backend segundo idioma	2025-08-21 07:21:55 +00:00
gustavo	472bc00677	ADD segundo idioma	2025-08-21 07:21:36 +00:00
gustavo	03e45ed783	MODIFY Styles	2025-08-13 08:59:42 +00:00
gustavo	23e613546a	MODIFY single pages	2025-08-13 08:59:26 +00:00
gustavo	223bca3767	MODIFY searcher	2025-08-13 08:58:35 +00:00
gustavo	d800c2cbc2	Add contactos page	2025-08-07 12:06:10 +00:00
gustavo	d9d463f65b	Add afiliarte page	2025-08-07 12:05:50 +00:00
gustavo	b172620cc4	Add new functios pages & styles	2025-08-07 12:05:32 +00:00
gustavo	006e242de0	MODIFY sigle page & comments	2025-08-07 12:04:48 +00:00
gustavo	f450ce568a	MODIFY menu burger mobile	2025-08-07 12:03:52 +00:00
gustavo	78d05a0223	MODIFY title	2025-08-07 12:03:01 +00:00
gustavo	313a7f4e98	Delete pages	2025-08-07 12:01:57 +00:00
gustavo	7d78d3ce26	ADD content & styles	2025-08-01 12:58:48 +00:00
gustavo	3d5605a415	MODIF backend	2025-07-30 11:26:23 +00:00
gustavo	63612a3d3d	ADD styles & js	2025-07-30 11:26:07 +00:00
gustavo	cd6bac2844	ADD new pages	2025-07-30 11:25:56 +00:00
gustavo	edb558c2d5	ADD portada, backend & styles	2025-07-25 11:51:47 +00:00
gustavo	81f7145333	ADD header & menus	2025-07-25 11:51:11 +00:00
gustavo	3118b35dbc	ADD pages	2025-07-25 10:50:09 +00:00
gustavo	7027644e7a	ADD css	2025-07-24 09:32:29 +00:00
gustavo	a04e44604c	Add views sections	2025-07-24 09:32:19 +00:00
gustavo	b932f912ff	Add backend logic	2025-07-24 09:31:42 +00:00
gustavo	88fa6330be	Add new pages	2025-07-24 09:31:01 +00:00
gustavo	4adf02215d	add yaros font family	2025-07-21 08:10:49 +00:00
gustavo	cf288d8ad4	add header & footer	2025-07-17 09:34:11 +00:00
gustavo	21988a9666	Add plugins & config	2025-07-16 07:33:09 +00:00
gustavo	4a0abe89c5	logos	2025-07-14 16:08:27 +00:00
gustavo	507d5af746	nestor	2025-07-14 08:13:44 +00:00
gustavo	6b74ca3b96	test	2025-07-14 08:13:19 +00:00
				`@ -0,0 +1 @@`
				`{% extends 'templates/page-quieres-afiliarte.twig' %}`
				`@ -0,0 +1 @@`
				`{% extends 'templates/page-noticias.twig' %}`
				`@ -0,0 +1 @@`
				`{% extends 'templates/single-acerca.twig' %}`