diff --git a/site/modules/InputfieldCKEditor/README.txt b/site/modules/InputfieldCKEditor/README.txt
deleted file mode 100644
index 6703d3e..0000000
--- a/site/modules/InputfieldCKEditor/README.txt
+++ /dev/null
@@ -1,40 +0,0 @@
-This InputfieldCKEditor directory is here to provide optional extra configuration options
-and plugins to the CKEditor Inputfield module. 
-
-
-plugins/ 
-========
-Directory to place additional CKEditor plugins in. You can then activate them
-from your CKEditor field settings. 
-
-
-contents.css
-============
-Example CSS file for the admin editor. To make CKEditor use this file, go to your CKEditor
-field settings and specify /site/modules/InputfieldCKEditor/contents.css as the regular
-mode Contents CSS file. 
-
-
-contents-inline.css
-===================
-Same as contents.css but for the inline mode editor. 
-
-
-mystyles.js
-===========
-Optional configuration for the CKEditor Styles option. To use this file, go to your 
-CKEditor field settings and set the Custom Styles Set to be this file. 
-
-
-config.js
-=========
-Custom config file used by all CKEditor instances (except instances configured by their
-own custom config file, see below...)
-
-
-config-body.js
-==============
-Example of field-specific custom config file. This one applies to a field named "body". 
-Note that these config settings can also be specified directly in your CKEditor field
-settings in the admin, which many may prefer. 
-
diff --git a/site/modules/InputfieldCKEditor/config-body.js b/site/modules/InputfieldCKEditor/config-body.js
deleted file mode 100644
index 94e207c..0000000
--- a/site/modules/InputfieldCKEditor/config-body.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * CKEditor field-specific (body) custom config file for ProcessWire
- *
- * Use this file to specify additional config options to a field named "body". 
- * This is here just for example purposes. If you wanted to create a config 
- * specific to some other field, like "sidebar", you would create another file
- * exactly like this named: config-sidebar.js
- * 
- * If you wanted to use the same config.js for all of your CKEditor fields, 
- * you would remove this file and just use the config.js file instead. Meaning,
- * this file completely overrides config.js if the field being edited is named
- * "body". The regular config.js file is not loaded when this one is loaded. 
- *
- */
-
-/**
- * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
-CKEDITOR.editorConfig = function( config ) {
-	// Define changes to default configuration here. For example:
-	// config.uiColor = '#AADC6E';
-};
\ No newline at end of file
diff --git a/site/modules/InputfieldCKEditor/config.js b/site/modules/InputfieldCKEditor/config.js
deleted file mode 100644
index 4d19845..0000000
--- a/site/modules/InputfieldCKEditor/config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * CKEditor custom config file for ProcessWire
- * 
- * Use this file to specify additional config options to all CKEditor instances, 
- * except those that have field-specific config files, i.e. config-body.js for 
- * config specific to a field named "body". 
- * 
- */
-
-/**
- * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
-CKEDITOR.editorConfig = function( config ) {
-	// Define changes to default configuration here. For example:
-	// config.uiColor = '#AADC6E';
-};
\ No newline at end of file
diff --git a/site/modules/InputfieldCKEditor/contents-inline.css b/site/modules/InputfieldCKEditor/contents-inline.css
deleted file mode 100644
index b747711..0000000
--- a/site/modules/InputfieldCKEditor/contents-inline.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * contents-inline.css
- * 
- * CKEditor editor styles for inline mode editor
- *
- * See also: contents-inline.scss
- * 
- * PLEASE NOTE: 
- * 
- * It's possible this file may be out of date since it is in /site/ rather than /wire/,
- * and the version of this file will reflect whatever version you had when you first
- * installed this copy of ProcessWire. 
- * 
- * If you intend to use this, you may first want to get the newest copy out of: 
- * /wire/modules/Inputfield/InputfieldCKEditor/contents-inline.css
- *
- * Original file copyright (as included with CKEditor):  
- * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- *
- */
-
-.InputfieldForm .InputfieldCKEditorInline {
-	font-family: Arial, sans-serif;
-}
-.InputfieldForm .InputfieldCKEditorInline p, 
-.InputfieldForm .InputfieldCKEditorInline li, 
-.InputfieldForm .InputfieldCKEditorInline dl, 
-.InputfieldForm .InputfieldCKEditorInline td {
-	font-size: 1em;
-	color: #333333;
-	background: white;
-}
-.InputfieldForm .InputfieldCKEditorInline a {
-	color: #444444;
-	background: none;
-	text-decoration: underline;
-}
-.InputfieldForm .InputfieldCKEditorInline a:hover {
-	color: #222222;
-	background: #ffffdd;
-}
-.InputfieldForm .InputfieldCKEditorInline i, 
-.InputfieldForm .InputfieldCKEditorInline em {
-	font-style: italic;
-}
-.InputfieldForm .InputfieldCKEditorInline b, 
-.InputfieldForm .InputfieldCKEditorInline strong {
-	font-weight: bold;
-}
-.InputfieldForm .InputfieldCKEditorInline strong em,
-.InputfieldForm .InputfieldCKEditorInline em strong {
-	font-weight: bold;
-	font-style: italic;
-}
-.InputfieldForm .InputfieldCKEditorInline small {
-	font-size: 0.875em;
-}
-.InputfieldForm .InputfieldCKEditorInline pre,
-.InputfieldForm .InputfieldCKEditorInline code {
-	font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
-}
-.InputfieldForm .InputfieldCKEditorInline code {
-	display: inline;
-	background: #fff2a8;
-}
-.InputfieldForm .InputfieldCKEditorInline ul li,
-.InputfieldForm .InputfieldCKEditorInline ol li {
-	list-style: disc;
-	display: list-item;
-	margin: 0 0 0 2em;
-}
-.InputfieldForm .InputfieldCKEditorInline ol li {
-	list-style: decimal;
-}
-.InputfieldForm .InputfieldCKEditorInline blockquote {
-	padding-left: 1em;
-	border-left: 3px solid #ccc;
-}
-.InputfieldForm .InputfieldCKEditorInline h1, 
-.InputfieldForm .InputfieldCKEditorInline h2, 
-.InputfieldForm .InputfieldCKEditorInline h3, 
-.InputfieldForm .InputfieldCKEditorInline h4, 
-.InputfieldForm .InputfieldCKEditorInline h5 {
-	color: #222222;
-	font-family: Arial, sans-serif;
-	font-weight: normal;
-	text-transform: none;
-}
-.InputfieldForm .InputfieldCKEditorInline h1 {
-	font-size: 2.0em;
-}
-.InputfieldForm .InputfieldCKEditorInline h2 {
-	font-size: 1.7em;
-}
-.InputfieldForm .InputfieldCKEditorInline h3 {
-	font-size: 1.5em;
-}
-.InputfieldForm .InputfieldCKEditorInline h4 {
-	font-size: 1.3em;
-}
-.InputfieldForm .InputfieldCKEditorInline h5 {
-	font-size: 1.2em;
-}
-.InputfieldForm .InputfieldCKEditorInline h6 {
-	font-size: 1.1em;
-}
-.InputfieldForm .InputfieldCKEditorInline table td,
-.InputfieldForm .InputfieldCKEditorInline table th {
-	padding: 3px;
-}
-.InputfieldForm .InputfieldCKEditorInline table th {
-	font-weight: bold;
-}
-.InputfieldForm .InputfieldCKEditorInline img {
-	max-width: 100%;
-}
-.InputfieldForm .InputfieldCKEditorInline img.cke_anchor {
-	display: inline;
-}
-
diff --git a/site/modules/InputfieldCKEditor/contents.css b/site/modules/InputfieldCKEditor/contents.css
deleted file mode 100644
index 9d42cc8..0000000
--- a/site/modules/InputfieldCKEditor/contents.css
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * contents.css
- * 
- * CKEditor editor styles for regular (non-inline) editor
- * See contents-inline.css for inline editor styles.
- *
- * Note that this file is not in use unless you configure your editor settings to use it 
- * in the "Custom Editor CSS File (regular mode)" option. As a result, this file is here
- * primarily as a placeholder and for instructions, though you may certainly modify and 
- * use it as-is. 
- *
- * PLEASE NOTE: 
- * 
- * It's possible this file may be out of date since it is in /site/ rather than /wire/,
- * and the version of this file will reflect whatever version you had when you first
- * installed this copy of ProcessWire. 
- * 
- * If you intend to use this, you may first want to get the newest copy out of: 
- * /wire/modules/Inputfield/InputfieldCKEditor/contents.css
- *
- * Original file copyright (as included with CKEditor):  
- * Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.html or http://ckeditor.com/license
- *
- */
-
-body {
-	/* Font */
-	font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
-	font-size: 14px;
-
-	/* Text color */
-	color: #333;
-
-	/* Remove the background color to make it transparent */
-	background-color: #fff;
-
-	margin: 10px;
-}
-
-.cke_editable {
-	font-size: 14px;
-	line-height: 1.6em;
-}
-
-blockquote {
-	font-style: italic;
-	font-family: Georgia, Times, "Times New Roman", serif;
-	padding: 2px 0;
-	border-style: solid;
-	border-color: #ccc;
-	border-width: 0;
-}
-
-.cke_contents_ltr blockquote {
-	padding-left: 20px;
-	padding-right: 8px;
-	border-left-width: 5px;
-}
-
-.cke_contents_rtl blockquote {
-	padding-left: 8px;
-	padding-right: 20px;
-	border-right-width: 5px;
-}
-
-a {
-	color: #0782C1;
-}
-
-ol,ul,dl {
-	/* IE7: reset rtl list margin. (#7334) */
-	*margin-right: 0px;
-	/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
-	padding: 0 40px;
-}
-
-h1,h2,h3,h4,h5,h6 {
-	font-weight: bold;
-	line-height: 1.2em;
-}
-
-hr {
-	border: 0px;
-	border-top: 1px solid #ccc;
-}
-
-img {
-	max-width: 100%;
-}
-
-img.right,
-img.align_right,
-img.align-right {
-	/* RCD */
-	border: 1px solid #ccc;
-	float: right;
-	margin-left: 15px;
-	padding: 5px;
-}
-
-img.left,
-img.align_left,
-img.align-left {
-	/* RCD */
-	border: 1px solid #ccc;
-	float: left;
-	margin-right: 15px;
-	padding: 5px;
-}
-
-img.align_center,
-img.align-center {
-	/* RCD */
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-img:hover {
-	opacity: .9;
-	filter: alpha(opacity = 90);
-}
-
-pre {
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	-webkit-tab-size: 4;
-	tab-size: 4;
-}
-
-.marker {
-	background-color: Yellow;
-}
-
-span[lang] {
-	font-style: italic;
-}
-
-figure {
-	text-align: center;
-	border: solid 1px #ccc;
-	border-radius: 2px;
-	background: rgba(0,0,0,0.05);
-	padding: 10px;
-	margin: 10px 20px;
-	display: inline-block;
-}
-
-figure > figcaption {
-	text-align: center;
-	display: block; /* For IE8 */
-}
-
-code {
-	/* RCD */
-	background: #fff2a8;
-}
-
-a > img {
-	padding: 1px;
-	margin: 1px;
-	border: none;
-	outline: 1px solid #0782C1;
-}
-
-
diff --git a/site/modules/InputfieldCKEditor/mystyles.js b/site/modules/InputfieldCKEditor/mystyles.js
deleted file mode 100644
index 8d68433..0000000
--- a/site/modules/InputfieldCKEditor/mystyles.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * mystyles.js - for ProcessWire CKEditor "Custom Editor Styles Set" option
- * 
- * Example file for "Custom Editor Styles Set" as seen in your CKEditor field config.
- * This file is not in use unless you specify it for that configuration item.
- * 
- * PLEASE NOTE: 
- * 
- * It's possible this file may be out of date since it is in /site/ rather than /wire/,
- * and the version of this file will reflect whatever version you had when you first
- * installed this copy of ProcessWire. 
- * 
- * If you intend to use this, you may first want to get the newest copy out of: 
- * /wire/modules/Inputfield/InputfieldCKEditor/mystyles.js
- *
- * For a more comprehensive example, see: 
- * /wire/modules/Inputfield/InputfieldCKEditor/ckeditor-[version]/styles.js
- * 
- */  
-
-CKEDITOR.stylesSet.add( 'mystyles', [
- { name: 'Inline Code', element: 'code' },
- { name: 'Inline Quotation', element: 'q' },
- { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
- { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
- { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },
- { name: 'Small', element: 'small' },
- { name: 'Deleted Text', element: 'del' },
- { name: 'Inserted Text', element: 'ins' },
- { name: 'Cited Work', element: 'cite' }
-]);
-
diff --git a/site/modules/InputfieldCKEditor/plugins/README.txt b/site/modules/InputfieldCKEditor/plugins/README.txt
deleted file mode 100644
index 58d1984..0000000
--- a/site/modules/InputfieldCKEditor/plugins/README.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-Directory to place additional CKEditor plugins in. You can then activate them
-from your CKEditor field settings. Place each plugin in its own directory 
-having the same name as the plugin. 
diff --git a/site/templates/css/main.css b/site/templates/css/main.css
index 834ad18..49087aa 100644
--- a/site/templates/css/main.css
+++ b/site/templates/css/main.css
@@ -41,6 +41,7 @@
     grid-column: destacado;
 }
 
+
 html, body
 {
     height: 100%;
@@ -81,7 +82,30 @@ figure
 
 figure img
 {
+    display: block;
+
     width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
+figure figcaption
+{
+    padding: 10px 40px 20px;
+
+    color: rgb(var(--cor_30));
+    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
+    font-weight: normal;
+    font-size: 1rem;
+    text-align: center;
+}
+
+p,
+figcaption
+{
+    max-width: 65ch;
+
+    margin-inline: auto;
 }
 
 ul,
@@ -103,12 +127,6 @@ ol a
     text-decoration: none;
 }
 
-section h3,
-section p
-{
-    margin: 0;
-}
-
 header#cabeceira
 {
     grid-template-rows: auto 1fr auto;
@@ -316,9 +334,135 @@ nav#migas
     margin-bottom: var(--separacion);
 }
 
-article section
+main#contido article,
+article section,
+div.artigo
 {
-    margin-bottom: var(--separacion);
+    margin-bottom: calc(var(--separacion) * 2);
+}
+
+article#habitacions figure
+{
+    position: relative;
+
+    width: 100%;
+    height: auto;
+    min-width: 320px;
+    max-width: 480px;
+    max-height: 360px;
+    overflow: hidden;
+
+    margin: 10px 1%;
+
+    padding: 0;
+
+    text-align: center;
+
+    background: rgb(var(--cor_30));
+
+    cursor: pointer;
+}
+
+article#habitacions figure img
+{
+    display: block;
+    object-fit: contain;
+
+    position: relative;
+    
+    width: 100%;
+    height: auto;
+    min-height: 100%;
+    max-width: 100%;
+
+    background-color: rgb(var(--cor_60));
+
+    opacity: 0.9;
+
+    transition: opacity 0.35s;
+}
+
+article#habitacions figure figcaption
+{
+    padding: 2em;
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 1.25em;
+  backface-visibility: hidden;
+}
+
+article#habitacions figure figcaption,
+article#habitacions figure figcaption > a
+{
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+}
+
+article#habitacions figure figcaption::before
+{
+    position: absolute;
+    top: 30px;
+    right: 30px;
+    bottom: 30px;
+    left: 30px;
+
+    border: 2px solid #fff;
+    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
+
+    content: '';
+
+    opacity: 0;
+
+    transition: opacity 0.35s, transform 0.35s;
+    transform: scale3d(1.4,1.4,1);
+}
+
+article#habitacions figure h2
+{
+    margin: 20% 0 10px 0;
+
+    color: rgb(var(--cor_30));
+    word-spacing: -0.15em;
+    font-weight: 700;
+
+    background: rgba(255,255,255,0.5);
+
+    transition: transform 0.35s;
+}
+
+article#habitacions figure p
+{
+    padding: 1em;
+
+    letter-spacing: 1px;
+    font-size: 68.5%;
+
+    opacity: 0;
+
+    transition: opacity 0.35s, transform 0.35s;
+    transform: scale(1.5);
+}
+
+article#habitacions figure:hover img
+{
+    opacity: 0.4;
+}
+
+article#habitacions figure:hover figcaption::before,
+article#habitacions figure:hover p
+{
+    opacity: 1;
+
+    transform: scale3d(1,1,1);
+}
+
+article#habitacions figure:hover h3
+{
+    transform: scale(0.9);
 }
 
 section#mantemento img
@@ -348,28 +492,6 @@ section[id^="galeria-"] div.swiper-wrapper
     height: auto;
 }
 
-section[id^="galeria-"] figure img
-{
-    display: block;
-
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-
-    background-color: rgb(var(--cor_60));
-}
-
-section[id^="galeria-"] figure figcaption
-{
-    padding: 10px 40px 20px;
-
-    color: rgb(var(--cor_30));
-    font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
-    font-weight: normal;
-    font-size: 1rem;
-    text-align: center;
-}
-
 section[id^="galeria-"] p.controis
 {
     display: flex;
@@ -475,6 +597,112 @@ section[id^="imaxe-"] div.artigo
     align-self: start;
 }
 
+section[id^="reixa-"],
+div[id^="reixa-"]
+{
+    display: grid;
+    align-items: center;
+    gap: var(--separacion);
+    grid-template-columns: 1fr;
+}
+
+section[id^="reixa-"] img,
+div[id^="reixa-"] img
+{
+    width: 100%;
+}
+
+section[id^="reixa-"] div.modal,
+div[id^="reixa-"] div.modal
+{
+    position: fixed; 
+    inset: 0;
+    z-index: 1;
+
+    width: 100%;
+    height: 100%;
+
+    padding: var(--separacion);
+    
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.9);
+}
+
+section[id^="reixa-"] div.modal figure,
+div[id^="reixa-"] div.modal figure
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+}
+
+section[id^="reixa-"] div.modal img,
+div[id^="reixa-"] div.modal img
+{
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+
+    margin: auto;
+}
+
+section[id^="reixa-"] div.modal figcaption,
+div[id^="reixa-"] div.modal figcaption
+{
+    display: block;
+
+    height: 40px;
+    width: 80%;
+    max-width: 700px;
+
+    margin: auto;
+
+    padding: 10px 0;
+    
+    text-align: center;
+    color: #ccc;
+}
+
+section[id^="reixa-"] .modal-pechar,
+div[id^="reixa-"] .modal-pechar
+{
+    position: absolute;
+    top: 15px;
+    right: 35px;
+
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+
+    transition: 0.3s;
+}
+
+section[id^="reixa-"] .modal-pechar:hover,
+div[id^="reixa-"] .modal-pechar:hover,
+section[id^="reixa-"] .modal-pechar:focus,
+div[id^="reixa-"] .modal-pechar:focus
+{
+    color: #bbb;
+    text-decoration: none;
+
+    cursor: pointer;
+}
+
+section[id^="reixa-"] img.modal-imaxe,
+div[id^="reixa-"] img.modal-imaxe,
+section[id^="reixa-"] figcaption,
+div[id^="reixa-"] figcaption
+{ 
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
 footer#pe
 {
     padding-block: 1.5rem;
@@ -577,11 +805,32 @@ footer#pe p#desenrolo span
     background-color: rgb(var(--cor_10));
 }
 
-.centrado
+.centrado,
+.align_center
 {
     text-align: center;
 }
 
+.flexible
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--separacion);
+}
+
+.linna
+{
+    flex-direction: row;
+}
+
+.noscroll
+{ 
+    overflow: hidden;
+}
+
 .visually-hidden
 {
     position: absolute;
@@ -616,6 +865,12 @@ footer#pe p#desenrolo span
 
 @media (min-width: 640px)
 {
+    section[id^="reixa-"],
+    div[id^="reixa-"]
+    {
+        grid-template-columns: 1fr 1fr;
+    }
+
     footer#pe div#info
     {
         grid-template-columns: auto var(--separacion) auto 1fr auto;
@@ -704,6 +959,12 @@ footer#pe p#desenrolo span
         grid-column: 1 / 3;
         grid-row: 1;
     }
+
+    section[id^="reixa-"],
+    div[id^="reixa-"]
+    {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
 }
 
 @media (min-width: 1024px)
@@ -744,4 +1005,15 @@ footer#pe p#desenrolo span
     {
         border-left: 0;
     }
+
+    article#habitacions figure
+    {
+        width: calc(50% - (var(--separacion) * 2));
+    }
+}
+
+@keyframes zoom
+{
+    from {transform:scale(0)}
+    to {transform:scale(1)}
 }
\ No newline at end of file
diff --git a/site/templates/habitacion.php b/site/templates/habitacion.php
index 4cfbff0..c8216f6 100644
--- a/site/templates/habitacion.php
+++ b/site/templates/habitacion.php
@@ -1,22 +1,31 @@
 <?php namespace ProcessWire;
 
-/** @var Page $page API variable */
-
-$menu = '';
-$contido = '';
+/** @var Page $page */
+/** @var Pages $pages */
+/** @var Config $config */
+/** @var Sanitizer $sanitizer API variable */
+/** @var WireInput $input API variable */
+/** @var User $user API variable */
+/** @var Languages $languages API variable */
+/** @var SiteConfig $configuracion */
+/** @var HomePage $inicio */
 
 if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
 {
-    $session->redirect($inicio->url);
+    $session->redirect($inicio->url); 
 }
 else
 {
-    
-    $menu = renderMenu($inicio->children);
-
-    $contido .= renderMigasPan($page) . "\n";
-    $contido .= '<article id="' . $page->name .'" class="container">' . "\n";
-    $contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "\n";
-    $contido .= getSeccions($page->seccions) . "\n";
-    $contido .= '</article>' . "\n";
+    $menu = renderMenu($inicio->and($inicio->children));
+?>
+    <main id="contido" class="completo">
+        <nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
+            <?=renderMigasPan($page);?>
+        </nav>
+        <article id="habitacion">
+            <h1><?=ucfirst($page->title);?></h1>
+            <?=getSeccions($page->seccions);?>
+        </article>
+    </main>
+<?php
 }
\ No newline at end of file
diff --git a/site/templates/habitacions.php b/site/templates/habitacions.php
index 66e2361..77cc1c9 100644
--- a/site/templates/habitacions.php
+++ b/site/templates/habitacions.php
@@ -1,9 +1,14 @@
 <?php namespace ProcessWire;
 
-/** @var Page $page API variable */
-
-$menu = '';
-$contido = '';
+/** @var Page $page */
+/** @var Pages $pages */
+/** @var Config $config */
+/** @var Sanitizer $sanitizer API variable */
+/** @var WireInput $input API variable */
+/** @var User $user API variable */
+/** @var Languages $languages API variable */
+/** @var SiteConfig $configuracion */
+/** @var HomePage $inicio */
 
 if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
 {
@@ -11,18 +16,19 @@ if($configuracion['mantemento']['activo'] && !$user->isLoggedin())
 }
 else
 {
-    
-    $menu = renderMenu($inicio->children);
-
-    $contido .= renderMigasPan($page) . "\n";
-    $contido .= '<article id="inicio" class="container">' . "\n";
-    $contido .= '<h2 class="visually-hidden">' . ucfirst($page->title) . '</h2>' . "\n";
-    $contido .= getSeccions($page->seccions) . "\n";
-    $contido .= '<div class="row g-4 py-5 row-cols-1 row-cols-lg-2 justify-content-center clearfix">' . "\n";
-    if(count($page->ligazon_imaxe))
-    {
-        $contido .= getSeccions($page->ligazon_imaxe) . "\n";
-    }
-    $contido .= '</div>' . "\n";
-    $contido .= '</article>' . "\n";
+    $menu = renderMenu($inicio->and($inicio->children));
+?>
+    <main id="contido" class="completo">
+        <nav id="migas" aria-label="<?=_x("Breadcrumb", "Breadcrumb");?>">
+            <?=renderMigasPan($page);?>
+        </nav>
+        <article id="habitacions" class="flexible linna">
+            <h1 class="visually-hidden"><?=ucfirst($page->title);?></h1>
+            <?=getSeccions($page->seccions);?>
+<?php if(count($page->ligazon_imaxe)): ?>
+            <?=getSeccions($page->ligazon_imaxe);?>
+<?php endif; ?>
+        </article>
+    </main>
+<?php
 }
\ No newline at end of file
diff --git a/site/templates/js/main.js b/site/templates/js/main.js
index 244c950..e905cef 100644
--- a/site/templates/js/main.js
+++ b/site/templates/js/main.js
@@ -39,4 +39,24 @@ const swiper_galeria = new Swiper(".galeria",
         prevEl: ".swiper-button-prev",
     },
     freeMode: false,
+});
+
+document.addEventListener("click", function (e)
+{
+    if(e.target.classList.contains("reixa-item") && window.matchMedia("(min-width: 768px)"))
+    {   
+        document.body.classList.toggle('noscroll', true);
+        document.querySelector(".modal").setAttribute('aria-hidden', false);
+        document.querySelector(".modal").style.display = 'block';
+        document.querySelector(".modal-imaxe").src = e.target.src;
+        document.querySelector(".modal-imaxe").alt = e.target.alt;
+        document.querySelector(".modal-descripcion").textContent = e.target.alt;
+    }
+
+    if(e.target.classList.contains("modal-pechar") && window.matchMedia("(min-width: 768px)"))
+    {
+        document.body.classList.toggle('noscroll', false);
+        document.querySelector(".modal").setAttribute('aria-hidden', true);
+        document.querySelector(".modal").style.display = 'none';
+    }
 });
\ No newline at end of file
diff --git a/site/templates/layout/func.php b/site/templates/layout/func.php
index 4174393..aa9975e 100644
--- a/site/templates/layout/func.php
+++ b/site/templates/layout/func.php
@@ -104,7 +104,7 @@ function getSeccions($seccions)
                 switch ($seccion->seccion_tipo->value)
                 {
                     case 'texto':
-                        $saida .= renderTexto($seccion, true);
+                        $saida .= renderTexto($seccion);
                         break;
                     case 'imaxe':
                         $saida .= renderImaxe($seccion);
@@ -305,6 +305,75 @@ function renderGaleria($seccion)
     return $saida;
 }
 
+/**
+ * @param array|PageArray $seccion
+ * @return string
+ */
+
+function renderReixa($seccion)
+{
+    $saida = '';
+    $reixa = '';
+    $modal = '';
+
+    foreach($seccion->imaxes as $imaxe)
+    {
+        $reixa .= '<img class="reixa-item" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">';
+    }
+
+    $modal .= '<div class="modal" tabindex="-1" aria-labelledby="reixa-modal-label" aria-hidden="true" style="display: none;">';
+    $modal .= '<i class="modal-pechar icon-x"></i><span class="visually-hidden">' . _x('Close menu', 'Close the menu'). '</span>';
+    $modal .= '<figure>';
+    $modal .= '<img class="modal-imaxe">';
+    $modal .= '<figcaption class="modal-descripcion"></figcaption>';
+    $modal .= '</figure>';
+    $modal .= '</div>';
+
+    if($seccion->titular)
+    {
+        $saida .= '<section id="reixa-' . $seccion->id . '">';
+        $saida .= '<h2>' . $seccion->titular . '</h2>';
+        $saida .= $reixa;
+        $saida .= $modal;
+        $saida .= '</section>';
+    }
+    else
+    {
+        $saida .= '<div id="reixa-' . $seccion->id . '">';
+        $saida .= $reixa;
+        $saida .= $modal;
+        $saida .= '</div>';
+    }
+
+    return $saida;
+}
+
+/**
+ * @param array|PageArray $seccion
+ * @return string
+ */
+
+function renderTexto($seccion)
+{
+    $saida = '';
+
+    if($seccion->titular)
+    {
+        $saida .= '<section id="texto-' . $seccion->id . '">';
+        $saida .= '<h2>' . $seccion->titular . '</h2>';
+        $saida .= $seccion->artigo;
+        $saida .= '</section>';
+    }
+    else
+    {
+        $saida .= '<div id="texto-' . $seccion->id . '" class="artigo">';
+        $saida .= $seccion->artigo;
+        $saida .= '</div>';
+    }
+
+    return $saida;
+}
+
 /**
  * @param array|PageArray $seccion
  * @return string
@@ -351,6 +420,27 @@ function renderImaxe($seccion)
     return $saida;
 }
 
+/**
+ * @param array|PageArray $seccion
+ * @return string
+ */
+
+function renderLigazonImaxe($seccion)
+{
+    $saida = '';
+
+    $saida .= '<figure>' . "\n";
+    $saida .= '<img src="' . $seccion->imaxe->url . '" alt="' . $seccion->imaxe->description . '" loading="lazy">';
+    $saida .= '<figcaption>' . "\n";
+    $saida .= '<h2>' . $seccion->titular . '</h2>' . "\n";
+    $saida .= '<p>' . _x('See details', 'see details') . '</p>' . "\n";
+    $saida .= '<a href=' . $seccion->ligazon_interna->url . '></a>' . "\n";
+    $saida .= '</figcaption>' . "\n";
+    $saida .= '</figure>' . "\n";
+
+    return $saida;
+}
+
 
 
 
@@ -393,72 +483,6 @@ function renderMapaDoSitio($paxinas, $profundidade = 0, $clase = 'nav')
     return $saida; 
 }
 
-
-
-/**
- * @param array|PageArray $seccion
- * @return string
- */
-
-function renderReixa($seccion)
-{
-    $saida = '';
-
-    $saida .= '<section class="container">' . "\n";
-    $saida .= '<h3 class="visually-hidden">' . (($seccion->titular) ? $seccion->titular : 'Reixa') . '</h3>' . "\n";
-    $saida .= '<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">' . "\n";
-    foreach($seccion->imaxes as $imaxe)
-    {
-        $saida .= '<figure class="col py-3">' . "\n";
-        $saida .= '<img class="reixa-item" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
-        $saida .= '</figure>' . "\n";
-    }
-    $saida .= '</div>'  . "\n";
-
-    $saida .= '<div class="modal fade" id="reixa-modal" tabindex="-1" aria-labelledby="reixa-modal-label" aria-hidden="true">'  . "\n";
-    $saida .= '<div class="modal-dialog modal-dialog-centered modal-lg">'  . "\n";
-    $saida .= '<div class="modal-content">'  . "\n";
-    $saida .= '<div class="modal-header">'  . "\n";
-    $saida .= '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'  . "\n";
-    $saida .= '</div>'  . "\n";
-    $saida .= '<div class="modal-body">'  . "\n";
-    $saida .= '<figure class="col">' . "\n";
-    $saida .= '<img class="modal-img" src="' . $imaxe->url . '" alt="' . $imaxe->description . '">' . "\n";
-    $saida .= '<figcaption class="modal-label">' . $imaxe->description . '</figcaption>' . "\n";
-    $saida .= '</figure>' . "\n";
-    $saida .= '</div>'  . "\n";
-    $saida .= '</div>'  . "\n";
-    $saida .= '</div>'  . "\n";
-    $saida .= '</div>'  . "\n";
-    $saida .= '</section>';
-
-    return $saida;
-}
-
-
-
-/**
- * @param array|PageArray $seccion
- * @return string
- */
-
-function renderTexto($seccion, $centrado = false)
-{
-    $saida = '';
-
-    if($seccion->titular)
-    {
-        $saida .= '<div class="row text-start ' . (($centrado) ? 'text-md-center' : '') . '">' . "\n";
-        $saida .= '<h3 class="fw-semibold">' . $seccion->titular . '</h3>' . "\n";
-        $saida .= '</div>' . "\n";
-    }
-    $saida .= '<div class="row text-start ' . (($centrado) ? 'text-md-center ' : '') . 'mb-5">' . "\n";
-    $saida .= $seccion->artigo  . "\n";
-    $saida .= '</div>'  . "\n";
-
-    return $saida;
-}
-
 /**
  * @param array|PageArray $seccion
  * @return string
@@ -495,26 +519,7 @@ function renderBoton($seccion)
     return $saida;
 }
 
-/**
- * @param array|PageArray $seccion
- * @return string
- */
 
-function renderLigazonImaxe($seccion)
-{
-    $saida = '';
-
-    $saida .= '<figure class="col effect-ming">' . "\n";
-    $saida .= '<img src="' . $seccion->imaxe->url . '" alt="' . $seccion->imaxe->description . '">' . "\n";
-    $saida .= '<figcaption>' . "\n";
-    $saida .= '<h3>' . $seccion->titular . '</h3>' . "\n";
-    $saida .= '<p>' . _x('See details', 'see details') . '</p>' . "\n";
-    $saida .= '<a href=' . $seccion->ligazon_interna->url . '></a>' . "\n";
-    $saida .= '</figcaption>' . "\n";
-    $saida .= '</figure>' . "\n";
-
-    return $saida;
-}
 
 /**
  * @param array|PageArray $seccion