diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index f23d2b0..a976437 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -7,7 +7,7 @@
 	"cancel": "Cancelar",
 	"check_your_email": "Comprueba tu correo",
 	"close": "Cerrar",
-	"code_of_conduct": "Código de conducta",
+	"code_of_conduct": "Charte Partie",
 	"contact_info": "Contacto",
 	"cookie_policy": "Política de cookies",
 	"day": "Día",
diff --git a/frontend/src/app.scss b/frontend/src/app.scss
index 28e605c..abff0e7 100644
--- a/frontend/src/app.scss
+++ b/frontend/src/app.scss
@@ -157,6 +157,50 @@ body {
 	font-family: $font-family-secondary;
 }
 
+/* ==========================================================================
+   Justificación de textos de contenido
+   Solo escritorio y tablet
+   ========================================================================== */
+
+@media (min-width: 769px) {
+	.content,
+	.content-border,
+	.strapi-markdown {
+		p,
+		li {
+			text-align: justify;
+			text-justify: inter-word;
+			hyphens: auto;
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			text-align: inherit;
+		}
+	}
+}
+
+/* ==========================================================================
+   Móvil y pantallas pequeñas
+   Se mantiene alineación natural a la izquierda
+   ========================================================================== */
+
+@media (max-width: 768px) {
+	.content,
+	.content-border,
+	.strapi-markdown {
+		p,
+		li {
+			text-align: left;
+			hyphens: none;
+		}
+	}
+}
+
 .container-all {
 	min-height: 100vh;
 	display: grid;
diff --git a/frontend/src/assets/images/Los_Puertos_Grises.jpg b/frontend/src/assets/images/Los_Puertos_Grises.jpg
new file mode 100644
index 0000000..dab016c
Binary files /dev/null and b/frontend/src/assets/images/Los_Puertos_Grises.jpg differ
diff --git a/frontend/src/assets/images/about_us_1.jpg b/frontend/src/assets/images/about_us_1.jpg
new file mode 100644
index 0000000..dec6619
Binary files /dev/null and b/frontend/src/assets/images/about_us_1.jpg differ
diff --git a/frontend/src/assets/images/about_us_2.jpg b/frontend/src/assets/images/about_us_2.jpg
new file mode 100644
index 0000000..01f43a3
Binary files /dev/null and b/frontend/src/assets/images/about_us_2.jpg differ
diff --git a/frontend/src/assets/images/camarote.jpeg b/frontend/src/assets/images/camarote.jpeg
new file mode 100644
index 0000000..2eba075
Binary files /dev/null and b/frontend/src/assets/images/camarote.jpeg differ
diff --git a/frontend/src/assets/images/charte_partie.jpg b/frontend/src/assets/images/charte_partie.jpg
new file mode 100644
index 0000000..858e028
Binary files /dev/null and b/frontend/src/assets/images/charte_partie.jpg differ
diff --git a/frontend/src/assets/images/tesoro.jpeg b/frontend/src/assets/images/tesoro.jpeg
new file mode 100644
index 0000000..cded266
Binary files /dev/null and b/frontend/src/assets/images/tesoro.jpeg differ
diff --git a/frontend/src/assets/images/tesoro.jpg b/frontend/src/assets/images/tesoro.jpg
deleted file mode 100644
index 7b4e1f8..0000000
Binary files a/frontend/src/assets/images/tesoro.jpg and /dev/null differ
diff --git a/frontend/src/lib/Footer.svelte b/frontend/src/lib/Footer.svelte
index 0b7645c..74bb39d 100644
--- a/frontend/src/lib/Footer.svelte
+++ b/frontend/src/lib/Footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as m from '$lib/paraglide/messages.js';
-	import logoFallback from '../assets/images/easyfest_okhand.png'
+	import logoFallback from '../assets/images/easyfest_okhand.png';
 
 	const storage_url = import.meta.env.VITE_STORAGE_URL;
 	let { data } = $props();
@@ -33,11 +33,16 @@
 	};
 </script>
 
-<footer class="footer">
-	<div class="container">
-		<div class="columns is-6">
-			<div class="column is-one-third">
-				<a class="logo_footer" href="https://www.sociedadtolkien.org/" target="_blank" rel="noopener noreferrer">
+<footer class="footer site-footer">
+	<div class="container site-footer__container">
+		<div class="columns is-6 site-footer__columns">
+			<div class="column is-one-third site-footer__column site-footer__logo-column">
+				<a
+					class="logo_footer"
+					href="https://www.sociedadtolkien.org/"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
 					{#if data.logo_horiz}
 						<img alt={data.title} src="{storage_url}{data.logo_horiz.url}" />
 					{:else}
@@ -45,57 +50,67 @@
 					{/if}
 				</a>
 			</div>
+
 			{#if data.show_cookie_policy || data.show_privacy_policy}
-				<div class="column">
+				<div class="column site-footer__column site-footer__legal-column">
 					<ul>
 						{#if data.show_cookie_policy}
 							<li>
 								<a href="/cookie-policy" class="text--medium">{m.cookie_policy()}</a>
 							</li>
 						{/if}
+
 						{#if data.show_privacy_policy}
 							<li>
-								<a href="/privacy-policy" class="text--medium"
-									>{m.privacy_policy()}</a
-								>
+								<a href="/privacy-policy" class="text--medium">{m.privacy_policy()}</a>
 							</li>
 						{/if}
 					</ul>
 				</div>
 			{/if}
-			<div class="column">
-                <ul>
-                    {#if data.show_org_team}
-                    <li><a href="/org-team" class="text--medium">{m.org_team()}</a></li>
-                    {/if}
-                    <li><a href="/contact-info" class="text--medium">{m.contact_info()}</a></li>
-                    {#if data.show_code_of_conduct}
-                    <li><a href="/code-of-conduct" class="text--medium">{m.code_of_conduct()}</a></li>
-                    {/if}
-                    {#if data.show_press_kit}
-                    <li><a href="/press-kit" class="text--medium">{m.press_kit()}</a></li>
-                    {/if}
-                </ul>
-            </div>
+
+			<div class="column site-footer__column site-footer__links-column">
+				<ul>
+					{#if data.show_org_team}
+						<li>
+							<a href="/org-team" class="text--medium">{m.org_team()}</a>
+						</li>
+					{/if}
+
+					<li>
+						<a href="/contact-info" class="text--medium">{m.contact_info()}</a>
+					</li>
+
+					{#if data.show_code_of_conduct}
+						<li>
+							<a href="/code-of-conduct" class="text--medium">{m.code_of_conduct()}</a>
+						</li>
+					{/if}
+
+					{#if data.show_press_kit}
+						<li>
+							<a href="/press-kit" class="text--medium">{m.press_kit()}</a>
+						</li>
+					{/if}
+				</ul>
+			</div>
+
 			{#if data.social_media_links?.length > 0}
-				<div class="column is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-one-third p-0">
+				<div class="column is-one-third p-0 site-footer__column site-footer__social-column">
 					<ul>
 						{#each data.social_media_links as link}
 							{@const icon = PLATFORMS_MAP[link.platform]}
+
 							<li class="is-inline-block m-2">
-								<a
-									href={link.url}
-									rel="me"
-									target="_blank"
-									class="icon text--medium"
-								>
+								<a href={link.url} rel="me" target="_blank" class="icon text--medium">
 									<img src={icon.url} alt={link.label || icon.name} />
 								</a>
 							</li>
 						{/each}
+
 						<li class="is-inline-block m-2">
 							<a
-								href="https://www.facebook.com/profile.php?id=61571579560904 "
+								href="https://www.facebook.com/profile.php?id=61571579560904"
 								rel="me"
 								target="_blank"
 								class="icon"
@@ -109,3 +124,126 @@
 		</div>
 	</div>
 </footer>
+
+<style>
+	.site-footer {
+		background: var(--bulma-dark, #073b42);
+	}
+
+	.site-footer__columns {
+		align-items: center;
+		margin-right: 0;
+		margin-left: 0;
+	}
+
+	.site-footer__column {
+		box-sizing: border-box;
+	}
+
+	.site-footer__social-column {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.site-footer__social-column ul {
+		margin: 0;
+	}
+
+	.site-footer__social-column img {
+		display: block;
+		max-width: 1.5rem;
+		height: auto;
+	}
+
+	.site-footer .logo_footer {
+		display: inline-flex;
+		align-items: center;
+		max-width: 100%;
+	}
+
+	.site-footer .logo_footer img {
+		display: block;
+		width: auto;
+		max-width: 100%;
+		height: auto;
+	}
+
+	@media (max-width: 1023px) {
+		.site-footer {
+			padding-right: 0;
+			padding-left: 0;
+			text-align: center;
+		}
+
+		.site-footer__container {
+			width: 100%;
+			max-width: 100%;
+			padding-right: 0;
+			padding-left: 0;
+		}
+
+		.site-footer__columns {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 100%;
+			margin-right: 0;
+			margin-left: 0;
+		}
+
+		.site-footer__column {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+			max-width: 100%;
+			padding-right: 0;
+			padding-left: 0;
+			text-align: center;
+		}
+
+		.site-footer__legal-column {
+			order: 1;
+		}
+
+		.site-footer__links-column {
+			order: 2;
+		}
+
+		.site-footer__social-column {
+			order: 3;
+			padding: 0;
+		}
+
+		.site-footer__logo-column {
+			order: 4;
+		}
+
+		.site-footer ul {
+			width: 100%;
+			margin: 0;
+			padding: 0;
+			text-align: center;
+			list-style: none;
+		}
+
+		.site-footer li {
+			text-align: center;
+		}
+
+		.site-footer .logo_footer {
+			display: flex;
+			justify-content: center;
+			width: 100%;
+		}
+
+		.site-footer .logo_footer img {
+			display: block;
+			width: auto;
+			max-width: min(100%, 15rem);
+			height: auto;
+			margin: 0 auto;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/Header.svelte b/frontend/src/lib/Header.svelte
index a42394a..46afb54 100644
--- a/frontend/src/lib/Header.svelte
+++ b/frontend/src/lib/Header.svelte
@@ -1,173 +1,259 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import * as m from '$lib/paraglide/messages.js'
-    import { i18n } from '$lib/i18n.js'
-
-    import logoFallback from '../assets/images/easyfest_logo.png'
-    const storage_url = import.meta.env.VITE_STORAGE_URL;
-
-    const REGISTRATION = {
-        HIDDEN: 'hidden',
-        SOON: 'soon',
-        OPEN: 'open',
-        FINISHED: 'finished',
-    }
-
-    let { data } = $props();
-
-    const username = data.username;
-    const isLoggedIn = (data.username !== undefined);
-
-    const isRegistrationOpen = data.registration === REGISTRATION.OPEN
-    const isLoginEnabled = data.loginEnabled
-
-    const isRegistrationInfoActive = !isRegistrationOpen && data.registration !== REGISTRATION.HIDDEN
-    const showMenu = data.show_about_us ||
-        isRegistrationInfoActive ||
-        data.show_accommodation_info ||
-        data.show_agenda ||
-        data.show_speakers ||
-        data.show_streaming ||
-        data.show_venue_info ||
-        data.show_prices
-
-    let navbarHiddenClass = '';
-    let isNavbarHidden = $state(false);
-
-    function hamburgerClick(event) {
-        const hamburger = event.currentTarget;
-        const menuId = hamburger.dataset.menuId;
-        const menu = document.getElementById(menuId);
-        if (menu) {
-            hamburger.classList.toggle("is-active");
-            menu.classList.toggle("is-active");
-        }
-    }
-
-    const handleNavbarVisibility = ({scrollMargin = 10, topSafeArea = 100} = {}) => {
-        let lastScrollPosition = window.scrollY;
-
-        window.addEventListener('scroll',() => {
-        const currentScrollPosition = window.scrollY;
-
-        if (currentScrollPosition>lastScrollPosition + scrollMargin) {
-            isNavbarHidden = true;
-        } else if (currentScrollPosition<lastScrollPosition - scrollMargin) {
-            isNavbarHidden = false;
-        }
-
-        if (currentScrollPosition < topSafeArea) navbarHiddenClass='';
-        lastScrollPosition = currentScrollPosition;
-    });
-    }
-
-    onMount(() => {
-        handleNavbarVisibility();
-    });
+	import { onMount } from 'svelte';
+	import * as m from '$lib/paraglide/messages.js';
+	import { i18n } from '$lib/i18n.js';
+
+	import logoFallback from '../assets/images/easyfest_logo.png';
+
+	const storage_url = import.meta.env.VITE_STORAGE_URL;
+
+	const REGISTRATION = {
+		HIDDEN: 'hidden',
+		SOON: 'soon',
+		OPEN: 'open',
+		FINISHED: 'finished'
+	};
+
+	let { data } = $props();
+
+	const username = data.username;
+	const isLoggedIn = data.username !== undefined;
+
+	const isRegistrationOpen = data.registration === REGISTRATION.OPEN;
+	const isLoginEnabled = data.loginEnabled;
+
+	const isRegistrationInfoActive = !isRegistrationOpen && data.registration !== REGISTRATION.HIDDEN;
+
+	const showMenu =
+		data.show_about_us ||
+		isRegistrationInfoActive ||
+		data.show_accommodation_info ||
+		data.show_agenda ||
+		data.show_speakers ||
+		data.show_streaming ||
+		data.show_venue_info ||
+		data.show_prices;
+
+	let isNavbarHidden = $state(false);
+	let isMenuActive = $state(false);
+
+	function toggleMenu() {
+		isMenuActive = !isMenuActive;
+
+		if (isMenuActive) {
+			isNavbarHidden = false;
+		}
+	}
+
+	function closeMenu() {
+		isMenuActive = false;
+	}
+
+	const handleNavbarVisibility = ({ scrollMargin = 10, topSafeArea = 100 } = {}) => {
+		let lastScrollPosition = window.scrollY;
+
+		const handleScroll = () => {
+			const currentScrollPosition = window.scrollY;
+			const isSmallScreen = window.matchMedia('(max-width: 1023px)').matches;
+
+			if (isSmallScreen || isMenuActive) {
+				isNavbarHidden = false;
+				lastScrollPosition = currentScrollPosition;
+				return;
+			}
+
+			if (currentScrollPosition < topSafeArea) {
+				isNavbarHidden = false;
+				lastScrollPosition = currentScrollPosition;
+				return;
+			}
+
+			if (currentScrollPosition > lastScrollPosition + scrollMargin) {
+				isNavbarHidden = true;
+			} else if (currentScrollPosition < lastScrollPosition - scrollMargin) {
+				isNavbarHidden = false;
+			}
+
+			lastScrollPosition = currentScrollPosition;
+		};
+
+		window.addEventListener('scroll', handleScroll, { passive: true });
+
+		return () => {
+			window.removeEventListener('scroll', handleScroll);
+		};
+	};
+
+	onMount(() => {
+		const cleanupNavbarVisibility = handleNavbarVisibility();
+
+		return () => {
+			cleanupNavbarVisibility?.();
+		};
+	});
 </script>
 
-<style>
-    .register-cta.register-cta--sticky {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: 100;
-        border-radius: 0;
-        height: 48px;
-    }
-
-    .register-cta.register-cta--menu {
-        display: none;
-    }
-
-    @media screen and (min-width: 1024px) {
-        .register-cta.register-cta--sticky {
-            display: none;
-        }
-
-        .register-cta.register-cta--menu {
-            display: unset;
-        }
-    }
-</style>
 <nav class="navbar" class:is-concealed={isNavbarHidden} aria-label="main-navigation">
-     <div class="container">
-        <div class="navbar-brand">
-            <a href="/" class="navbar-item brand">
-                {#if data.logo_small}
-                <img alt={data.title} src="{storage_url}{data.logo_small.url}"/>
-                {:else}
-                <img alt={data.title} src={logoFallback}/>
-                {/if}
-                <span class="brand-home-label">Mereth Gaerlen</span>
-            </a>
-
-            {#if showMenu}
-            <button class="navbar-burger" aria-label="menu" aria-expanded="false" data-menu-id="mainMenu"
-               onclick={hamburgerClick}>
-                <span aria-hidden="true"></span>
-                <span aria-hidden="true"></span>
-                <span aria-hidden="true"></span>
-                <span aria-hidden="true"></span>
-            </button>
-            {/if}
-        </div>
-        {#if showMenu}
-        <div id="mainMenu" class="navbar-menu">
-            {#if data.nav_menu?.length === 0}
-                <div class="navbar-start navbar-right">
-                    {#if data.show_about_us}
-                    <a class="navbar-item" href="/about-us">{m.about()}</a>
-                    {/if}
-                    {#if isRegistrationInfoActive}
-                    <a class="navbar-item" href="/registration">{m.registration()}</a>
-                    {/if}
-                    {#if data.show_accommodation_info}
-                    <a class="navbar-item" href="/accommodation-info">{m.accommodation_info()}</a>
-                    {/if}
-                    {#if data.show_agenda}
-                    <a class="navbar-item" href="/agenda">{m.agenda()}</a>
-                    {/if}
-                    {#if data.show_speakers}
-                    <a class="navbar-item" href="/speakers">{m.speakers()}</a>
-                    {/if}
-                    {#if data.show_streaming}
-                    <a class="navbar-item" href="/streaming">{m.streaming()}</a>
-                    {/if}
-                    {#if data.show_venue_info}
-                    <a class="navbar-item" href="/venue-info">{m.venue_info()}</a>
-                    {/if}
-                    {#if data.show_prices}
-                    <a class="navbar-item" href="/price">{m.prices()}</a>
-                    {/if}
-                </div>
-            {:else}
-                <div class="navbar-start navbar-right">
-                    {#each data.nav_menu as nav_menu_item}
-                        {#if nav_menu_item.page}
-                            <a class="navbar-item" href="{i18n.resolveRoute(nav_menu_item.page)}">{nav_menu_item.label}</a>
-                        {:else}
-                            <a class="navbar-item" href="{nav_menu_item.path}">{nav_menu_item.label}</a>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-            <div class="navbar-end">
-                {#if isRegistrationOpen}
-                <a href="/registration" class="button is-primary register-cta register-cta--menu">{data.register_cta}</a>
-                {:else if isLoginEnabled }
-                    {#if isLoggedIn}
-                        <a href="/me" class="button is-primary is-uppercase" title="{username}">Mis datos</a>
-                    {:else}
-                        <a href="/login" class="button is-primary is-uppercase  ">{m.login()}</a>
-                    {/if}
-                {/if}
-            </div>
-        </div>
-        {/if}
-    </div>
+	<div class="container">
+		<div class="navbar-brand">
+			<a href="/" class="navbar-item brand" onclick={closeMenu}>
+				{#if data.logo_small}
+					<img alt={data.title} src="{storage_url}{data.logo_small.url}" />
+				{:else}
+					<img alt={data.title} src={logoFallback} />
+				{/if}
+
+				<span class="brand-home-label">Mereth Gaerlen</span>
+			</a>
+
+			{#if showMenu}
+				<button
+					class="navbar-burger"
+					class:is-active={isMenuActive}
+					aria-label="menu"
+					aria-expanded={isMenuActive}
+					aria-controls="mainMenu"
+					onclick={toggleMenu}
+				>
+					<span aria-hidden="true"></span>
+					<span aria-hidden="true"></span>
+					<span aria-hidden="true"></span>
+					<span aria-hidden="true"></span>
+				</button>
+			{/if}
+		</div>
+
+		{#if showMenu}
+			<div id="mainMenu" class="navbar-menu" class:is-active={isMenuActive}>
+				{#if data.nav_menu?.length === 0}
+					<div class="navbar-start navbar-right">
+						{#if data.show_about_us}
+							<a class="navbar-item" href="/about-us" onclick={closeMenu}>{m.about()}</a>
+						{/if}
+
+						{#if isRegistrationInfoActive}
+							<a class="navbar-item" href="/registration" onclick={closeMenu}>
+								{m.registration()}
+							</a>
+						{/if}
+
+						{#if data.show_accommodation_info}
+							<a class="navbar-item" href="/accommodation-info" onclick={closeMenu}>
+								{m.accommodation_info()}
+							</a>
+						{/if}
+
+						{#if data.show_agenda}
+							<a class="navbar-item" href="/agenda" onclick={closeMenu}>{m.agenda()}</a>
+						{/if}
+
+						{#if data.show_speakers}
+							<a class="navbar-item" href="/speakers" onclick={closeMenu}>{m.speakers()}</a>
+						{/if}
+
+						{#if data.show_streaming}
+							<a class="navbar-item" href="/streaming" onclick={closeMenu}>{m.streaming()}</a>
+						{/if}
+
+						{#if data.show_venue_info}
+							<a class="navbar-item" href="/venue-info" onclick={closeMenu}>
+								{m.venue_info()}
+							</a>
+						{/if}
+
+						{#if data.show_prices}
+							<a class="navbar-item" href="/price" onclick={closeMenu}>{m.prices()}</a>
+						{/if}
+					</div>
+				{:else}
+					<div class="navbar-start navbar-right">
+						{#each data.nav_menu as nav_menu_item}
+							{#if nav_menu_item.page}
+								<a
+									class="navbar-item"
+									href={i18n.resolveRoute(nav_menu_item.page)}
+									onclick={closeMenu}
+								>
+									{nav_menu_item.label}
+								</a>
+							{:else}
+								<a class="navbar-item" href={nav_menu_item.path} onclick={closeMenu}>
+									{nav_menu_item.label}
+								</a>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+
+				<div class="navbar-end">
+					{#if isRegistrationOpen}
+						<a
+							href="/registration"
+							class="button is-primary register-cta register-cta--menu"
+							onclick={closeMenu}
+						>
+							{data.register_cta}
+						</a>
+					{:else if isLoginEnabled}
+						{#if isLoggedIn}
+							<a
+								href="/me"
+								class="button is-primary is-uppercase"
+								title={username}
+								onclick={closeMenu}
+							>
+								Mis datos
+							</a>
+						{:else}
+							<a href="/login" class="button is-primary is-uppercase" onclick={closeMenu}>
+								{m.login()}
+							</a>
+						{/if}
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
 </nav>
+
 {#if isRegistrationOpen}
-<div><a href="/registration" class="button is-primary register-cta register-cta--sticky">{data.register_cta}</a></div>
+	<div>
+		<a href="/registration" class="button is-primary register-cta register-cta--sticky">
+			{data.register_cta}
+		</a>
+	</div>
 {/if}
+
+<style>
+	.register-cta.register-cta--sticky {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		z-index: 100;
+		border-radius: 0;
+		height: 48px;
+	}
+
+	.register-cta.register-cta--menu {
+		display: none;
+	}
+
+	@media screen and (min-width: 1024px) {
+		.register-cta.register-cta--sticky {
+			display: none;
+		}
+
+		.register-cta.register-cta--menu {
+			display: unset;
+		}
+	}
+
+	@media screen and (max-width: 1023px) {
+		.navbar.is-concealed {
+			transform: none;
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
index c65aea8..6272c1f 100644
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -23,7 +23,7 @@ export const i18n = createI18n(runtime, {
 		},
 		'/code-of-conduct': {
 			en: '/code-of-conduct',
-			es: '/codigo-de-conducta'
+			es: '/charte-partie'
 		},
 		'/contact-info': {
 			en: '/contact-info',
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index fef6e37..888ec27 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import SvelteMarkdown from '@humanspeak/svelte-markdown';
 
-	import heroFallback from '../assets/images/easyfest-illustration.png';
+	import heroLosPuertosGrises from '../assets/images/Los_Puertos_Grises.jpg';
 	import Marquee from '../lib/Marquee';
 
 	const storage_url = import.meta.env.VITE_STORAGE_URL;
@@ -23,6 +23,7 @@
 
 	/** @type {HTMLDivElement} */
 	let /* binded */ marqueeElement = $state();
+
 	onMount(() => {
 		if (!marqueeElement) return;
 		new Marquee(marqueeElement, 50);
@@ -135,9 +136,7 @@
 	const daysUntilEvent = Math.max(0, Math.ceil((eventStartDate - today) / (1000 * 60 * 60 * 24)));
 	const eventStatus = settings.eventStatus ?? settings.event_status ?? EVENT_STATUS.HYPE;
 
-	const heroImage = homepage?.hero_image?.url
-		? `${storage_url}${homepage.hero_image.url}`
-		: heroFallback;
+	const heroImage = heroLosPuertosGrises;
 </script>
 
 <section class="hero hero-home home-hero">
@@ -149,7 +148,7 @@
 				</div>
 
 				<div class="home-hero__overlay"></div>
-
+				<p class="home-hero__image-credit">© Ted Nasmith - And Aragorn Came</p>
 				<div class="home-hero__content">
 					<div class="home-hero__text">
 						{#if homepage && homepage.title}
@@ -206,6 +205,26 @@
 		</div>
 	</div>
 </section>
+
+{#if homepage?.show_marquee_text && homepage?.marquee_text}
+	<section class="home-news" aria-label="Novedades">
+		<div class="container">
+			<div class="home-news__card">
+				<div class="home-news__label">
+					<span aria-hidden="true">✦</span>
+					<span>Novedades</span>
+				</div>
+
+				<div class="home-news__marquee-wrapper">
+					<div bind:this={marqueeElement} class="marquee home-news__marquee">
+						<div>{homepage.marquee_text}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+{/if}
+
 <section class="home-expectations">
 	<div class="container">
 		<div class="home-expectations__heading">
@@ -245,6 +264,7 @@
 		</div>
 	</div>
 </section>
+
 {#if homepage && homepage.about_section}
 	{@const title = homepage.about_section.title}
 	{@const image = homepage.about_section.image}
@@ -259,11 +279,6 @@
 		</div>
 		<div class="container">
 			<div class="level columns">
-				<!-- <div class="column">
-                <figure class="image is-5by4">
-                    <img src="{storage_url}{image.url}" alt={image.caption}/>
-                </figure>
-            </div> -->
 				<div
 					class="column is-three-fifths has-text-centered is-offset-one-fifth content is-size-6-mobile is-size-5"
 				>
@@ -274,14 +289,6 @@
 	</section>
 {/if}
 
-{#if homepage.show_marquee_text && homepage.marquee_text}
-	<aside class="has-background-primary-light">
-		<div bind:this={marqueeElement} class="marquee level is-mobile text--small--uppercase py-4">
-			<div>{homepage.marquee_text}</div>
-		</div>
-	</aside>
-{/if}
-
 {#if settings.show_agenda && homepage.activities_section}
 	{@const activities = homepage.activities_section}
 	{@const featuredActivities = activities.featured_activities}
@@ -523,7 +530,7 @@
 		overflow: hidden;
 		min-height: 34rem;
 		background: var(--home-dark);
-		box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.16);
+		box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.1);
 	}
 
 	.home-hero__shell::before {
@@ -532,7 +539,7 @@
 		inset: 0;
 		z-index: 3;
 		pointer-events: none;
-		opacity: 0.5;
+		opacity: 0.35;
 		background-image:
 			radial-gradient(
 				circle at 18% 12%,
@@ -577,22 +584,47 @@
 		object-fit: cover;
 	}
 
+	.home-hero__image-credit {
+		position: absolute;
+		top: 2rem;
+		right: 2rem;
+		z-index: 6;
+		display: inline-flex;
+		align-items: center;
+		max-width: calc(100% - 4rem);
+		margin: 0;
+		padding: 0.28rem 0.55rem;
+		border: 1px solid rgba(255, 255, 255, 0.22);
+		border-radius: 999px;
+		background: rgba(8, 33, 38, 0.52);
+		color: rgba(255, 255, 255, 0.96);
+		font-family: var(--bulma-family-secondary, inherit);
+		font-size: 0.72rem;
+		line-height: 1;
+		letter-spacing: 0.02em;
+		text-align: right;
+		white-space: nowrap;
+		box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
+		backdrop-filter: blur(4px);
+		pointer-events: none;
+	}
+
 	.home-hero__overlay {
 		z-index: 2;
 		background:
 			linear-gradient(
 				90deg,
 				rgba(var(--home-dark-rgb), 0.96) 0%,
-				rgba(var(--home-dark-rgb), 0.9) 22%,
-				rgba(var(--home-dark-rgb), 0.62) 42%,
-				rgba(var(--home-dark-rgb), 0.2) 64%,
-				rgba(var(--home-dark-rgb), 0.06) 100%
+				rgba(var(--home-dark-rgb), 0.88) 22%,
+				rgba(var(--home-dark-rgb), 0.56) 42%,
+				rgba(var(--home-dark-rgb), 0.16) 64%,
+				rgba(var(--home-dark-rgb), 0.03) 100%
 			),
 			linear-gradient(
 				180deg,
-				rgba(var(--home-dark-rgb), 0.22) 0%,
-				rgba(var(--home-dark-rgb), 0.08) 45%,
-				rgba(var(--home-dark-rgb), 0.24) 100%
+				rgba(var(--home-dark-rgb), 0.18) 0%,
+				rgba(var(--home-dark-rgb), 0.04) 45%,
+				rgba(var(--home-dark-rgb), 0.18) 100%
 			);
 	}
 
@@ -815,6 +847,98 @@
 		line-height: 1;
 	}
 
+	/* =========================
+	   NOVEDADES
+	   ========================= */
+
+	.home-news {
+		--home-gold: #d7b56d;
+		--home-dark: var(--bulma-dark, #123f46);
+
+		position: relative;
+		z-index: 2;
+		padding: 2rem 1.5rem 0;
+		background: #f6f1e8;
+	}
+
+	.home-news__card {
+		position: relative;
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		gap: 1rem;
+		align-items: center;
+		overflow: hidden;
+		padding: 0.9rem 1rem;
+		border: 1px solid rgba(215, 181, 109, 0.52);
+		border-radius: 1.25rem;
+		background:
+			radial-gradient(circle at 10% 50%, rgba(215, 181, 109, 0.18), transparent 14rem),
+			rgba(255, 255, 255, 0.82);
+		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.06);
+		backdrop-filter: blur(8px);
+	}
+
+	.home-news__card::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 1.25rem;
+		left: 1.25rem;
+		height: 2px;
+		background: linear-gradient(90deg, transparent, var(--home-gold), transparent);
+		pointer-events: none;
+	}
+
+	.home-news__label {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.45rem;
+		padding: 0.55rem 0.85rem;
+		border-radius: 999px;
+		background: var(--home-dark);
+		color: var(--home-gold);
+		font-family: var(--bulma-family-primary, inherit);
+		font-size: 0.78rem;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		white-space: nowrap;
+	}
+
+	.home-news__marquee-wrapper {
+		position: relative;
+		overflow: hidden;
+		min-width: 0;
+		color: rgba(18, 63, 70, 0.88);
+		font-size: 1rem;
+		line-height: 1.45;
+		background: transparent;
+
+		-webkit-mask-image: linear-gradient(
+			90deg,
+			transparent 0,
+			#000 1.25rem,
+			#000 calc(100% - 6rem),
+			transparent 100%
+		);
+		mask-image: linear-gradient(
+			90deg,
+			transparent 0,
+			#000 1.25rem,
+			#000 calc(100% - 6rem),
+			transparent 100%
+		);
+	}
+
+	.home-news__marquee {
+		margin: 0;
+	}
+
+	.home-news__marquee > * {
+		padding-right: 6rem;
+	}
+
 	/* =========================
 	   LO QUE TE ESPERA
 	   ========================= */
@@ -1078,7 +1202,7 @@
 			height: clamp(31rem, 118vw, 38rem);
 			overflow: hidden;
 			background: var(--home-dark);
-			box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.16);
+			box-shadow: none;
 		}
 
 		.home-hero__media img {
@@ -1086,6 +1210,34 @@
 			object-fit: cover;
 		}
 
+		.home-hero__image-credit {
+			position: relative;
+			top: auto;
+			right: auto;
+			bottom: auto;
+			z-index: 5;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: fit-content;
+			max-width: calc(100% - 2rem);
+			margin: 0.45rem auto 0;
+			padding: 0.24rem 0.48rem;
+			border: 1px solid rgba(255, 255, 255, 0.22);
+			border-radius: 999px;
+			background: rgba(8, 33, 38, 0.52);
+			color: rgba(255, 255, 255, 0.96);
+			font-family: var(--bulma-family-secondary, inherit);
+			font-size: 0.66rem;
+			line-height: 1.1;
+			letter-spacing: 0.02em;
+			text-align: center;
+			white-space: normal;
+			box-shadow: none;
+			backdrop-filter: blur(4px);
+			pointer-events: none;
+		}
+
 		.home-hero__overlay {
 			position: absolute;
 			inset: 0 0 auto;
@@ -1154,6 +1306,44 @@
 			font-size: 2.4rem;
 		}
 
+		.home-news {
+			padding: 1.5rem 1rem 0;
+		}
+
+		.home-news__card {
+			grid-template-columns: 1fr;
+			gap: 0.85rem;
+			padding: 1rem;
+			text-align: center;
+		}
+
+		.home-news__label {
+			justify-self: center;
+		}
+
+		.home-news__marquee-wrapper {
+			font-size: 0.95rem;
+
+			-webkit-mask-image: linear-gradient(
+				90deg,
+				transparent 0,
+				#000 0.9rem,
+				#000 calc(100% - 3rem),
+				transparent 100%
+			);
+			mask-image: linear-gradient(
+				90deg,
+				transparent 0,
+				#000 0.9rem,
+				#000 calc(100% - 3rem),
+				transparent 100%
+			);
+		}
+
+		.home-news__marquee > * {
+			padding-right: 3rem;
+		}
+
 		.home-expectations {
 			padding: 2.5rem 1rem 3rem;
 		}
diff --git a/frontend/src/routes/about-us/+page.svelte b/frontend/src/routes/about-us/+page.svelte
index c173599..16c01f1 100644
--- a/frontend/src/routes/about-us/+page.svelte
+++ b/frontend/src/routes/about-us/+page.svelte
@@ -1,25 +1,256 @@
 <script lang="ts">
-  import SvelteMarkdown from '@humanspeak/svelte-markdown'
-  let { data } = $props();
+	import SvelteMarkdown from '@humanspeak/svelte-markdown';
+	import aboutUs1 from '../../assets/images/about_us_1.jpg';
+	import aboutUs2 from '../../assets/images/about_us_2.jpg';
+
+	let { data } = $props();
+
+	function splitMarkdownContent(content?: string): [string, string] {
+		if (!content) return ['', ''];
+
+		const blocks = content
+			.trim()
+			.split(/\n\s*\n/)
+			.filter(Boolean);
+
+		if (blocks.length <= 1) return [content, ''];
+
+		const midpoint = Math.ceil(blocks.length / 2);
+
+		return [blocks.slice(0, midpoint).join('\n\n'), blocks.slice(midpoint).join('\n\n')];
+	}
+
+	let contentParts = $derived(splitMarkdownContent(data.content));
 </script>
+
 <section class="hero page-title">
-  <h3 class="title">{data.title}</h3>
+	<h3 class="title">{data.title}</h3>
 </section>
 
-<section class="section">
-    <div class="container">
-        <div class="content content-border">
-          <div class="columns ">
-            <div class="column is-three-fifths">
-              {#if data.content}
-                <SvelteMarkdown options={{mangle: false}} source={data.content}/>
-              {/if}
-            </div>
-            <div class="column is-flex is-justify-content-flex-end">
-              {#if data.image}
-                <img src={data.image} alt="About us image" />
-              {/if}
-            </div>
-        </div>
-    </div>
+<section class="section about-event">
+	<div class="container">
+		<div class="content content-border about-event__content">
+			<div class="columns is-vcentered about-event__row">
+				<div class="column is-three-fifths">
+					{#if contentParts[0]}
+						<SvelteMarkdown options={{ mangle: false }} source={contentParts[0]} />
+					{/if}
+				</div>
+
+				<div class="column about-event__image-column about-event__image-column--right">
+					<figure class="about-event__figure">
+						<img class="about-event__image" src={aboutUs1} alt="Sobre el evento" />
+
+						<figcaption class="about-event__image-credit">
+							© Ted Nasmith - Farewell at the Grey Havens
+						</figcaption>
+					</figure>
+				</div>
+			</div>
+
+			{#if contentParts[1]}
+				<div class="columns is-vcentered about-event__row about-event__row--second">
+					<div class="column about-event__image-column about-event__image-column--left">
+						<figure class="about-event__figure">
+							<img class="about-event__image" src={aboutUs2} alt="Sobre el evento" />
+
+							<figcaption class="about-event__image-credit">
+								© Ted Nasmith - The Shores of Valinor
+							</figcaption>
+						</figure>
+					</div>
+
+					<div class="column is-three-fifths about-event__text-column--right">
+						<SvelteMarkdown options={{ mangle: false }} source={contentParts[1]} />
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
 </section>
+
+<style>
+	/* ==========================================================================
+	   Layout general
+	   ========================================================================== */
+
+	.about-event__content {
+		overflow: hidden;
+	}
+
+	.about-event__row {
+		gap: 2rem;
+		align-items: center;
+	}
+
+	.about-event__row--second {
+		margin-top: 3rem;
+		padding-top: 3rem;
+	}
+
+	.about-event__image-column {
+		display: flex;
+		align-self: stretch;
+	}
+
+	.about-event__image-column--right {
+		justify-content: flex-end;
+	}
+
+	.about-event__image-column--left {
+		justify-content: flex-start;
+	}
+
+	.about-event__text-column--right {
+		margin-left: auto;
+	}
+
+	/* ==========================================================================
+	   Imagen y copyright
+	   ========================================================================== */
+
+	.about-event__figure {
+		position: relative;
+		width: min(100%, 26rem);
+		height: 100%;
+		min-height: 26rem;
+		margin: 0;
+	}
+
+	.about-event__image {
+		display: block;
+		width: 100%;
+		height: 100%;
+		min-height: 26rem;
+		border-radius: 1.25rem;
+		object-fit: cover;
+		object-position: center center;
+		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
+	}
+
+	.about-event__image-credit {
+		position: absolute;
+		right: 0.75rem;
+		bottom: 0.75rem;
+		z-index: 2;
+		display: inline-flex;
+		align-items: center;
+		max-width: calc(100% - 1.5rem);
+		margin: 0;
+		padding: 0.28rem 0.55rem;
+		border: 1px solid rgba(255, 255, 255, 0.22);
+		border-radius: 999px;
+		background: rgba(8, 33, 38, 0.52);
+		color: rgba(255, 255, 255, 0.96);
+		font-family: var(--bulma-family-secondary, inherit);
+		font-size: 0.72rem;
+		line-height: 1;
+		letter-spacing: 0.02em;
+		text-align: right;
+		white-space: nowrap;
+		box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
+		backdrop-filter: blur(4px);
+		pointer-events: none;
+	}
+
+	/* ==========================================================================
+	   Tablet
+	   ========================================================================== */
+
+	@media (max-width: 1023px) {
+		.about-event__row {
+			display: flex;
+			flex-direction: column;
+			gap: 1.25rem;
+		}
+
+		.about-event__row--second {
+			flex-direction: column-reverse;
+			margin-top: 1.5rem;
+			padding-top: 1.5rem;
+		}
+
+		.about-event__image-column,
+		.about-event__image-column--right,
+		.about-event__image-column--left {
+			justify-content: center;
+			width: 100%;
+		}
+
+		.about-event__text-column--right {
+			margin-left: 0;
+		}
+
+		.about-event__figure {
+			width: min(100%, 32rem);
+			height: auto;
+			min-height: auto;
+		}
+
+		.about-event__image {
+			aspect-ratio: 16 / 9;
+			height: auto;
+			min-height: 0;
+			object-fit: cover;
+			object-position: center center;
+		}
+	}
+
+	/* ==========================================================================
+	   Móvil
+	   ========================================================================== */
+
+	@media (max-width: 768px) {
+		.about-event__row {
+			gap: 0.75rem;
+		}
+
+		.about-event__row--second {
+			margin-top: 0.75rem;
+			padding-top: 0.75rem;
+		}
+
+		.about-event__figure {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: min(100%, 22rem);
+			height: auto;
+			min-height: auto;
+			margin: 0;
+		}
+
+		.about-event__image {
+			aspect-ratio: 4 / 3;
+			height: auto;
+			min-height: 0;
+			object-fit: cover;
+			object-position: center center;
+			box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.05);
+		}
+
+		.about-event__image-credit {
+			position: static;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: fit-content;
+			max-width: 100%;
+			margin: 0.45rem auto 0;
+			padding: 0.24rem 0.48rem;
+			border: 1px solid rgba(255, 255, 255, 0.22);
+			border-radius: 999px;
+			background: rgba(8, 33, 38, 0.52);
+			color: rgba(255, 255, 255, 0.96);
+			font-family: var(--bulma-family-secondary, inherit);
+			font-size: 0.66rem;
+			line-height: 1.1;
+			letter-spacing: 0.02em;
+			text-align: center;
+			white-space: normal;
+			box-shadow: none;
+			backdrop-filter: blur(4px);
+			pointer-events: none;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/code-of-conduct/+page.svelte b/frontend/src/routes/code-of-conduct/+page.svelte
index c9221a2..089d4df 100644
--- a/frontend/src/routes/code-of-conduct/+page.svelte
+++ b/frontend/src/routes/code-of-conduct/+page.svelte
@@ -1,17 +1,269 @@
 <script lang="ts">
-  import SvelteMarkdown from '@humanspeak/svelte-markdown'
-  let { data } = $props();
+	import SvelteMarkdown from '@humanspeak/svelte-markdown';
+	import charterPartieImage from '../../assets/images/charte_partie.jpg';
+
+	let { data } = $props();
+
+	function splitIntroContent(content?: string): [string, string, string] {
+		if (!content) return ['', '', ''];
+
+		const blocks = content
+			.trim()
+			.split(/\n\s*\n/)
+			.filter(Boolean);
+
+		const cardTitle = blocks[0] ?? '';
+		const cardText = blocks[1] ?? '';
+		const bodyContent = blocks.slice(2).join('\n\n');
+
+		return [cardTitle, cardText, bodyContent];
+	}
+
+	let contentParts = $derived(splitIntroContent(data.content));
 </script>
 
 <section class="hero page-title">
 	<h3 class="title">{data.title}</h3>
 </section>
-<section class="section">
-    <div class="container">
-        <div class="content">
-          {#if data.content}
-          <SvelteMarkdown options={{mangle: false}} source={data.content}/>
-          {/if}
-        </div>
-    </div>
+
+<section class="section charter-page">
+	<div class="container">
+		{#if contentParts[0] || contentParts[1]}
+			<div class="charter-card">
+				<div class="charter-card__image">
+					<img src={charterPartieImage} alt="" />
+					<span class="charter-card__credit">© Zoltan Boros</span>
+				</div>
+
+				<div class="charter-card__content">
+					{#if contentParts[0]}
+						<div class="charter-card__title">
+							<SvelteMarkdown options={{ mangle: false }} source={contentParts[0]} />
+						</div>
+					{/if}
+
+					{#if contentParts[1]}
+						<div class="strapi-markdown charter-card__text">
+							<SvelteMarkdown options={{ mangle: false }} source={contentParts[1]} />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if contentParts[2]}
+			<div class="content content-border charter-body">
+				<SvelteMarkdown options={{ mangle: false }} source={contentParts[2]} />
+			</div>
+		{/if}
+	</div>
 </section>
+
+<style>
+	/* ==========================================================================
+	   Layout general
+	   ========================================================================== */
+
+	.charter-page {
+		padding-top: 2rem;
+		padding-bottom: 4rem;
+		overflow-x: hidden;
+	}
+
+	.charter-body {
+		margin-top: 2.5rem;
+	}
+
+	/* ==========================================================================
+	   Tarjeta superior
+	   ========================================================================== */
+
+	.charter-card {
+		position: relative;
+		display: grid;
+		grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr);
+		gap: 1.5rem;
+		align-items: center;
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 100%;
+		margin: 0 0 2.5rem;
+		padding: 1.1rem;
+		overflow: visible;
+		border: 1px solid rgba(18, 63, 70, 0.1);
+		border-radius: 1.5rem;
+		background:
+			radial-gradient(circle at 12% 18%, rgba(215, 181, 109, 0.16), transparent 16rem),
+			rgba(255, 255, 255, 0.76);
+		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05);
+		backdrop-filter: blur(8px);
+	}
+
+	.charter-card::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 1.5rem;
+		left: 1.5rem;
+		height: 2px;
+		background: linear-gradient(90deg, transparent, #d7b56d, transparent);
+		opacity: 0.9;
+		pointer-events: none;
+	}
+
+	.charter-card::after {
+		content: '✦';
+		position: absolute;
+		top: 0;
+		left: 50%;
+		padding: 0 0.65rem;
+		background: rgba(255, 255, 255, 0.86);
+		color: #d7b56d;
+		font-size: 1.15rem;
+		line-height: 1;
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
+	/* ==========================================================================
+	   Imagen y copyright
+	   ========================================================================== */
+
+	.charter-card__image {
+		position: relative;
+		height: 11rem;
+		overflow: hidden;
+		border-radius: 1.15rem;
+		background: var(--bulma-dark, #123f46);
+	}
+
+	.charter-card__image::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		background:
+			linear-gradient(90deg, rgba(18, 63, 70, 0.2), transparent 45%),
+			linear-gradient(180deg, transparent 40%, rgba(18, 63, 70, 0.35));
+		pointer-events: none;
+	}
+
+	.charter-card__image img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		object-position: center;
+	}
+
+	.charter-card__credit {
+		position: absolute;
+		right: 0.75rem;
+		bottom: 0.75rem;
+		z-index: 2;
+		display: inline-flex;
+		align-items: center;
+		padding: 0.28rem 0.55rem;
+		border: 1px solid rgba(255, 255, 255, 0.22);
+		border-radius: 999px;
+		background: rgba(8, 33, 38, 0.52);
+		color: rgba(255, 255, 255, 0.96);
+		font-size: 0.72rem;
+		line-height: 1;
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+		box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
+		backdrop-filter: blur(4px);
+		pointer-events: none;
+	}
+
+	/* ==========================================================================
+	   Texto de la tarjeta
+	   ========================================================================== */
+
+	.charter-card__content {
+		width: 90%;
+		max-width: 100%;
+	}
+
+	.charter-card__title {
+		margin: 0 0 0.55rem;
+		color: var(--bulma-dark, #123f46);
+		font-family: var(--bulma-family-primary, inherit);
+		font-size: 1.65rem;
+		line-height: 1.15;
+		text-align: left;
+	}
+
+	.charter-card__title :global(p),
+	.charter-card__title :global(h1),
+	.charter-card__title :global(h2),
+	.charter-card__title :global(h3),
+	.charter-card__title :global(h4) {
+		margin: 0;
+		color: inherit;
+		font: inherit;
+		line-height: inherit;
+		text-align: inherit;
+	}
+
+	.charter-card__text {
+		margin: 0;
+		color: rgba(18, 63, 70, 0.78);
+		font-size: inherit;
+		line-height: inherit;
+		text-align: left;
+	}
+
+	.charter-card__text :global(p) {
+		margin: 0;
+		color: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		text-align: inherit;
+	}
+
+	/* ==========================================================================
+	   Anulación del justificado global dentro de la tarjeta
+	   ========================================================================== */
+
+	.charter-card p,
+	.charter-card li {
+		text-align: left;
+		text-justify: auto;
+		hyphens: none;
+	}
+
+	/* ==========================================================================
+	   Responsive
+	   ========================================================================== */
+
+	@media (max-width: 768px) {
+		.charter-card {
+			grid-template-columns: minmax(0, 1fr);
+			gap: 1.25rem;
+			width: 100%;
+			max-width: 100%;
+			padding: 1rem;
+		}
+
+		.charter-card__image {
+			height: 10rem;
+		}
+
+		.charter-card__credit {
+			right: 0.55rem;
+			bottom: 0.55rem;
+			padding: 0.24rem 0.48rem;
+			font-size: 0.66rem;
+		}
+
+		.charter-card__content {
+			width: 100%;
+			max-width: 100%;
+		}
+
+		.charter-card__title {
+			font-size: 1.4rem;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/price/+page.svelte b/frontend/src/routes/price/+page.svelte
index c710c0a..38a6f9b 100644
--- a/frontend/src/routes/price/+page.svelte
+++ b/frontend/src/routes/price/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import SvelteMarkdown from '@humanspeak/svelte-markdown';
 	import * as m from '$lib/paraglide/messages.js';
-	import treasureImage from '../../assets/images/tesoro.jpg';
+	import roomImage from '../../assets/images/camarote.jpeg';
+	import treasureImage from '../../assets/images/tesoro.jpeg';
 
 	type Price = {
 		name: string;
@@ -29,6 +30,10 @@
 		return Number.isNaN(parsedValue) ? 0 : parsedValue;
 	}
 
+	function isPricePending(value: number | string): boolean {
+		return getNumericValue(value) === 0;
+	}
+
 	function getAccommodationOrder(price: Price): number {
 		const name = price.name.toLowerCase();
 
@@ -65,17 +70,15 @@
 
 		<div class="prices-treasure" aria-hidden="true">
 			<div class="prices-treasure__image">
-				<img src={treasureImage} alt="" />
+				<img src={roomImage} alt="" />
+				<span class="prices-treasure__credit">© Eduardo Francisco</span>
 			</div>
 
 			<div class="prices-treasure__content">
 				<p class="prices-treasure__title">Elige tu camarote para la travesía</p>
 
 				<div class="strapi-markdown prices-treasure__text">
-					<p>
-						Consulta aquí los precios de las habitaciones y los complementos premium antes de la
-						inscripción.
-					</p>
+					<p>Consulta aquí los precios de las habitaciones antes de la inscripción.</p>
 				</div>
 			</div>
 		</div>
@@ -104,9 +107,16 @@
 								{/if}
 							</div>
 
-							<div class="prices-card__amount">
-								<span>{priceObj.value}</span>
-								<small>{priceObj.currency}</small>
+							<div
+								class="prices-card__amount"
+								class:prices-card__amount--pending={isPricePending(priceObj.value)}
+							>
+								{#if isPricePending(priceObj.value)}
+									<span>PRECIO POR DETERMINAR</span>
+								{:else}
+									<span>{priceObj.value}</span>
+									<small>{priceObj.currency}</small>
+								{/if}
 							</div>
 						</article>
 					{/each}
@@ -114,6 +124,26 @@
 			</section>
 		{/if}
 
+		{#if accommodationPrices.length > 0 && premiumPrices.length > 0}
+			<div class="prices-treasure prices-treasure--between" aria-hidden="true">
+				<div class="prices-treasure__image">
+					<img src={treasureImage} alt="" />
+					<span class="prices-treasure__credit">© Valera Lutfullina</span>
+				</div>
+
+				<div class="prices-treasure__content">
+					<p class="prices-treasure__title">Añade extras a tu travesía</p>
+
+					<div class="strapi-markdown prices-treasure__text">
+						<p>
+							Además del alojamiento, puedes consultar aquí los complementos premium disponibles
+							para añadir a tu inscripción.
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
+
 		{#if premiumPrices.length > 0}
 			<section class="prices-block prices-block--premium" aria-labelledby="premium-prices-title">
 				<div class="prices-block__header">
@@ -135,9 +165,16 @@
 								{/if}
 							</div>
 
-							<div class="prices-card__amount">
-								<span>{priceObj.value}</span>
-								<small>{priceObj.currency}</small>
+							<div
+								class="prices-card__amount"
+								class:prices-card__amount--pending={isPricePending(priceObj.value)}
+							>
+								{#if isPricePending(priceObj.value)}
+									<span>PRECIO POR DETERMINAR</span>
+								{:else}
+									<span>{priceObj.value}</span>
+									<small>{priceObj.currency}</small>
+								{/if}
 							</div>
 						</article>
 					{/each}
@@ -148,22 +185,45 @@
 </section>
 
 <style>
+	/* ==========================================================================
+	   Layout general
+	   ========================================================================== */
+
+	.prices-page {
+		padding-top: 2rem;
+		padding-bottom: 4rem;
+	}
+
+	.prices-intro {
+		margin-bottom: 2rem;
+	}
+
+	/* ==========================================================================
+	   Tarjetas con imagen
+	   ========================================================================== */
+
 	.prices-treasure {
 		position: relative;
 		display: grid;
-		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
-		gap: 2rem;
+		grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr);
+		gap: 1.5rem;
 		align-items: center;
 		margin: 0 0 2.5rem;
-		padding: 1.25rem;
+		padding: 1.1rem;
+		overflow: hidden;
 		border: 1px solid rgba(18, 63, 70, 0.1);
 		border-radius: 1.5rem;
 		background:
 			radial-gradient(circle at 12% 18%, rgba(215, 181, 109, 0.16), transparent 16rem),
 			rgba(255, 255, 255, 0.76);
 		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05);
-		overflow: hidden;
 		backdrop-filter: blur(8px);
+		text-align: left;
+	}
+
+	.prices-treasure--between {
+		margin-top: 2.5rem;
+		margin-bottom: 0;
 	}
 
 	.prices-treasure::before {
@@ -194,8 +254,8 @@
 
 	.prices-treasure__image {
 		position: relative;
+		height: 11rem;
 		overflow: hidden;
-		min-height: 13rem;
 		border-radius: 1.15rem;
 		background: var(--bulma-dark, #123f46);
 	}
@@ -214,20 +274,34 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		min-height: 13rem;
 		object-fit: cover;
+		object-position: center;
 	}
 
-	.prices-treasure__content {
-		max-width: 34rem;
+	.prices-treasure__credit {
+		position: absolute;
+		right: 0.75rem;
+		bottom: 0.75rem;
+		z-index: 2;
+		display: inline-flex;
+		align-items: center;
+		padding: 0.28rem 0.55rem;
+		border: 1px solid rgba(255, 255, 255, 0.22);
+		border-radius: 999px;
+		background: rgba(8, 33, 38, 0.52);
+		color: rgba(255, 255, 255, 0.96);
+		font-size: 0.72rem;
+		line-height: 1;
+		letter-spacing: 0.02em;
+		white-space: nowrap;
+		box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
+		backdrop-filter: blur(4px);
+		pointer-events: none;
 	}
 
-	.prices-treasure__eyebrow {
-		margin: 0 0 0.4rem;
-		color: var(--bulma-primary, #0b4f4a);
-		font-size: 0.78rem;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
+	.prices-treasure__content {
+		width: 90%;
+		max-width: none;
 	}
 
 	.prices-treasure__title {
@@ -236,41 +310,30 @@
 		font-family: var(--bulma-family-primary, inherit);
 		font-size: 1.65rem;
 		line-height: 1.15;
+		text-align: left;
 	}
 
 	.prices-treasure__text {
 		margin: 0;
 		color: rgba(18, 63, 70, 0.78);
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		text-align: left;
 	}
 
 	.prices-treasure__text p {
 		margin: 0;
+		color: inherit;
+		font-family: inherit;
+		font-size: inherit;
+		line-height: inherit;
+		text-align: left;
 	}
 
-	@media (max-width: 768px) {
-		.prices-treasure {
-			grid-template-columns: 1fr;
-			gap: 1.25rem;
-			padding: 1rem;
-		}
-
-		.prices-treasure__image,
-		.prices-treasure__image img {
-			min-height: 11rem;
-		}
-
-		.prices-treasure__title {
-			font-size: 1.4rem;
-		}
-	}
-	.prices-page {
-		padding-top: 2rem;
-		padding-bottom: 4rem;
-	}
-
-	.prices-intro {
-		margin-bottom: 2rem;
-	}
+	/* ==========================================================================
+	   Bloques de precios
+	   ========================================================================== */
 
 	.prices-block {
 		margin-top: 2.5rem;
@@ -282,20 +345,12 @@
 
 	.prices-block__header {
 		display: flex;
+		gap: 2rem;
 		align-items: flex-end;
 		justify-content: space-between;
-		gap: 2rem;
 		margin-bottom: 1.25rem;
 	}
 
-	.prices-block__eyebrow {
-		margin: 0 0 0.35rem;
-		color: var(--bulma-primary, #0b4f4a);
-		font-size: 0.78rem;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-	}
-
 	.prices-block__title {
 		margin: 0;
 		color: var(--bulma-dark, #123f46);
@@ -313,6 +368,10 @@
 		text-align: right;
 	}
 
+	/* ==========================================================================
+	   Listado de precios
+	   ========================================================================== */
+
 	.prices-card-list {
 		overflow: hidden;
 		border: 1px solid rgba(18, 63, 70, 0.1);
@@ -330,9 +389,8 @@
 		align-items: center;
 		padding: 1.25rem 1.35rem;
 		border-bottom: 1px solid rgba(18, 63, 70, 0.1);
-		transition:
-			background 180ms ease,
-			box-shadow 180ms ease;
+		text-align: left;
+		transition: background 180ms ease;
 	}
 
 	.prices-card:last-child {
@@ -354,23 +412,36 @@
 		background: rgba(255, 255, 255, 0.92);
 	}
 
-	.prices-card:hover::before {
+	.prices-block--accommodation .prices-card:hover::before {
+		background: #2f6f8f;
+	}
+
+	.prices-block--premium .prices-card:hover::before {
 		background: #d7b56d;
 	}
 
+	.prices-card__content {
+		max-width: calc(100% - 2rem);
+		padding-right: 2rem;
+		text-align: left;
+	}
+
 	.prices-card__content h5 {
 		margin: 0 0 0.35rem;
 		color: var(--bulma-dark, #123f46);
 		font-family: var(--bulma-family-primary, inherit);
 		font-size: 1.2rem;
 		line-height: 1.25;
+		text-align: left;
 	}
 
 	.prices-card__content p {
+		max-width: 72%;
 		margin: 0;
 		color: rgba(18, 63, 70, 0.82);
 		font-size: 1rem;
 		line-height: 1.45;
+		text-align: left;
 	}
 
 	.prices-card__amount {
@@ -396,7 +467,62 @@
 		opacity: 0.78;
 	}
 
+	.prices-card__amount--pending {
+		max-width: 12rem;
+		white-space: normal;
+	}
+
+	.prices-card__amount--pending span {
+		font-size: 0.95rem;
+		line-height: 1.2;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	/* ==========================================================================
+	   Anulación del justificado global dentro de tarjetas
+	   ========================================================================== */
+
+	.prices-treasure p,
+	.prices-treasure li,
+	.prices-card p,
+	.prices-card li {
+		text-align: left;
+		text-justify: auto;
+		hyphens: none;
+	}
+
+	/* ==========================================================================
+	   Responsive
+	   ========================================================================== */
+
 	@media (max-width: 768px) {
+		.prices-treasure {
+			grid-template-columns: 1fr;
+			gap: 1.25rem;
+			padding: 1rem;
+		}
+
+		.prices-treasure__image {
+			height: 10rem;
+		}
+
+		.prices-treasure__credit {
+			right: 0.55rem;
+			bottom: 0.55rem;
+			padding: 0.24rem 0.48rem;
+			font-size: 0.66rem;
+		}
+
+		.prices-treasure__content {
+			width: 100%;
+			max-width: 100%;
+		}
+
+		.prices-treasure__title {
+			font-size: 1.4rem;
+		}
+
 		.prices-block__header {
 			display: block;
 		}
@@ -411,8 +537,21 @@
 			gap: 1rem;
 		}
 
+		.prices-card__content {
+			max-width: 100%;
+			padding-right: 0;
+		}
+
+		.prices-card__content p {
+			max-width: 100%;
+		}
+
 		.prices-card__amount {
 			text-align: left;
 		}
+
+		.prices-card__amount--pending {
+			max-width: 100%;
+		}
 	}
 </style>