helpers/pagetop-macros/src/lib.rs

@@ -266,13 +266,10 @@ pub fn builder_fn(_: TokenStream, item: TokenStream) -> TokenStream {
         v
     };
 
-    // Filtra los atributos descartando `#[doc]` y `#[inline]` para el método `alter_...()`.
+    // Extrae atributos descartando la documentación para incluir en `alter_...()`.
-    let non_doc_or_inline_attrs: Vec<_> = attrs
+    let non_doc_attrs: Vec<_> = attrs
         .iter()
-        .filter(|a| {
+        .filter(|&a| !a.path().is_ident("doc"))
-            let p = a.path();
-            !p.is_ident("doc") && !p.is_ident("inline")
-        })
         .cloned()
         .collect();
 
@@ -287,21 +284,14 @@ pub fn builder_fn(_: TokenStream, item: TokenStream) -> TokenStream {
                 #(#attrs)*
                 fn #with_name #generics (self, #(#args),*) -> Self #where_clause;
 
-                #(#non_doc_or_inline_attrs)*
+                #(#non_doc_attrs)*
                 #[doc = #alter_doc]
                 fn #alter_ident #generics (&mut self, #(#args),*) -> &mut Self #where_clause;
             }
         }
         Some(body) => {
-            // Si no se indicó ninguna forma de `inline`, fuerza `#[inline]` para `with_...()`.
-            let force_inline = if attrs.iter().any(|a| a.path().is_ident("inline")) {
-                quote! {}
-            } else {
-                quote! { #[inline] }
-            };
             let with_fn = if is_trait {
                 quote! {
-                    #force_inline
                     #vis_pub fn #with_name #generics (self, #(#args),*) -> Self #where_clause {
                         let mut s = self;
                         s.#alter_ident(#(#call_idents),*);
@@ -310,7 +300,6 @@ pub fn builder_fn(_: TokenStream, item: TokenStream) -> TokenStream {
                 }
             } else {
                 quote! {
-                    #force_inline
                     #vis_pub fn #with_name #generics (mut self, #(#args),*) -> Self #where_clause {
                         self.#alter_ident(#(#call_idents),*);
                         self
@@ -321,7 +310,7 @@ pub fn builder_fn(_: TokenStream, item: TokenStream) -> TokenStream {
                 #(#attrs)*
                 #with_fn
 
-                #(#non_doc_or_inline_attrs)*
+                #(#non_doc_attrs)*
                 #[doc = #alter_doc]
                 #vis_pub fn #alter_ident #generics (&mut self, #(#args),*) -> &mut Self #where_clause {
                     #body

src/base/component/menu/item.rs

@@ -49,7 +49,7 @@ impl Component for Item {
             }),
             ItemKind::Link(label, path) => PrepareMarkup::With(html! {
                 li class="menu__item menu__item--link" {
-                    a class="menu__link" href=(path(cx)) title=[description] {
+                    a href=(path(cx)) title=[description] {
                         (left_icon)
                         span class="menu__label" { (label.using(cx)) }
                         (right_icon)
@@ -58,7 +58,7 @@ impl Component for Item {
             }),
             ItemKind::LinkBlank(label, path) => PrepareMarkup::With(html! {
                 li class="menu__item menu__item--link" {
-                    a class="menu__link" href=(path(cx)) title=[description] target="_blank" {
+                    a href=(path(cx)) title=[description] target="_blank" {
                         (left_icon)
                         span class="menu__label" { (label.using(cx)) }
                         (right_icon)
@@ -72,7 +72,7 @@ impl Component for Item {
             }),
             ItemKind::Submenu(label, submenu) => PrepareMarkup::With(html! {
                 li class="menu__item menu__item--children" {
-                    button type="button" class="menu__link" title=[description] {
+                    a href="#" title=[description] {
                         (left_icon)
                         span class="menu__label" { (label.using(cx)) }
                         (Icon::svg(html! {
@@ -86,7 +86,7 @@ impl Component for Item {
             }),
             ItemKind::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
                 li class="menu__item menu__item--children" {
-                    button type="button" class="menu__link" title=[description] {
+                    a href="#" title=[description] {
                         (left_icon)
                         span class="menu__label" { (label.using(cx)) }
                         (Icon::svg(html! {

src/base/theme.rs

@@ -1,4 +1,4 @@
 //! Temas básicos soportados por PageTop.
 
 mod basic;
-pub use basic::{Basic, BasicRegion};
+pub use basic::Basic;

src/base/theme/basic.rs

@@ -1,9 +1,6 @@
 /// Es el tema básico que incluye PageTop por defecto.
 use crate::prelude::*;
 
-/// El tema básico usa las mismas regiones predefinidas por [`ThemeRegion`].
-pub type BasicRegion = ThemeRegion;
-
 /// Tema básico por defecto.
 ///
 /// Ofrece las siguientes composiciones (*layouts*):
@@ -49,8 +46,12 @@ impl Theme for Basic {
     }
 
     fn after_render_page_body(&self, page: &mut Page) {
+        let styles = match page.layout() {
+            "Intro" => "/css/intro.css",
+            "PageTopIntro" => "/css/intro.css",
+            _ => "/css/basic.css",
+        };
         let pkg_version = env!("CARGO_PKG_VERSION");
-
         page.alter_assets(ContextOp::AddStyleSheet(
             StyleSheet::from("/css/normalize.css")
                 .with_version("8.0.1")
@@ -61,11 +62,6 @@ impl Theme for Basic {
                 .with_version(pkg_version)
                 .with_weight(-99),
         ))
-        .alter_assets(ContextOp::AddStyleSheet(
-            StyleSheet::from("/css/basic.css")
-                .with_version(pkg_version)
-                .with_weight(-99),
-        ))
         .alter_assets(ContextOp::AddStyleSheet(
             StyleSheet::from("/css/components.css")
                 .with_version(pkg_version)
@@ -76,6 +72,11 @@ impl Theme for Basic {
                 .with_version(pkg_version)
                 .with_weight(-99),
         ))
+        .alter_assets(ContextOp::AddStyleSheet(
+            StyleSheet::from(styles)
+                .with_version(pkg_version)
+                .with_weight(-99),
+        ))
         .alter_assets(ContextOp::AddJavaScript(
             JavaScript::defer("/js/menu.js")
                 .with_version(pkg_version)
@@ -85,22 +86,14 @@ impl Theme for Basic {
 }
 
 fn render_intro(page: &mut Page) -> Markup {
-    page.alter_assets(ContextOp::AddStyleSheet(
-        StyleSheet::from("/css/intro.css").with_version(env!("CARGO_PKG_VERSION")),
-    ));
-
     let title = page.title().unwrap_or_default();
     let intro = page.description().unwrap_or_default();
 
-    let theme = page.context().theme();
-    let h = theme.render_page_region(page, &BasicRegion::Header);
-    let c = theme.render_page_region(page, &BasicRegion::Content);
-    let f = theme.render_page_region(page, &BasicRegion::Footer);
-
     let intro_button_txt: L10n = page.param_or_default("intro_button_txt");
     let intro_button_lnk: Option<&String> = page.param("intro_button_lnk");
 
     html! {
+        body id=[page.body_id().get()] class=[page.body_classes().get()] {
             header class="intro-header" {
                 section class="intro-header__body" {
                     h1 class="intro-header__title" {
@@ -126,11 +119,9 @@ fn render_intro(page: &mut Page) -> Markup {
                         }
                     }
                 }
-            (h)
             }
             main class="intro-content" {
                 section class="intro-content__body" {
-                div class="intro-text" {
                     @if intro_button_lnk.is_some() {
                         div class="intro-button" {
                             a
@@ -146,8 +137,7 @@ fn render_intro(page: &mut Page) -> Markup {
                             }
                         }
                     }
-                    (c)
+                    div class="intro-text" { (page.render_region("content")) }
-                }
                 }
             }
             footer class="intro-footer" {
@@ -173,7 +163,7 @@ fn render_intro(page: &mut Page) -> Markup {
                         em { (L10n::l("intro_have_fun").using(page)) }
                     }
                 }
-            (f)
+            }
         }
     }
 }

src/core/component/context.rs

@@ -1,6 +1,5 @@
-use crate::core::component::ChildOp;
 use crate::core::theme::all::{theme_by_short_name, DEFAULT_THEME};
-use crate::core::theme::{ChildrenInRegions, ThemeRef};
+use crate::core::theme::ThemeRef;
 use crate::core::TypeInfo;
 use crate::html::{html, Markup};
 use crate::html::{Assets, Favicon, JavaScript, StyleSheet};
@@ -105,10 +104,6 @@ pub trait Contextual: LangId {
     #[builder_fn]
     fn with_assets(self, op: ContextOp) -> Self;
 
-    /// Opera con [`ChildOp`] en una región (`region_key`) de la página.
-    #[builder_fn]
-    fn with_child_in(self, region_key: &'static str, op: ChildOp) -> Self;
-
     // **< Contextual GETTERS >*********************************************************************
 
     /// Devuelve una referencia a la solicitud HTTP asociada, si existe.
@@ -216,7 +211,6 @@ pub struct Context {
     favicon    : Option<Favicon>,               // Favicon, si se ha definido.
     stylesheets: Assets<StyleSheet>,            // Hojas de estilo CSS.
     javascripts: Assets<JavaScript>,            // Scripts JavaScript.
-    regions    : ChildrenInRegions,             // Regiones de componentes para renderizar.
     params     : HashMap<&'static str, (Box<dyn Any>, &'static str)>, // Parámetros en ejecución.
     id_counter : usize,                         // Contador para generar identificadores únicos.
 }
@@ -256,7 +250,6 @@ impl Context {
             favicon    : None,
             stylesheets: Assets::<StyleSheet>::new(),
             javascripts: Assets::<JavaScript>::new(),
-            regions    : ChildrenInRegions::default(),
             params     : HashMap::default(),
             id_counter : 0,
         }
@@ -290,13 +283,6 @@ impl Context {
         markup
     }
 
-    /// Renderiza los componentes de una región (`region_key`).
-    pub fn render_components_of(&mut self, region_key: &'static str) -> Markup {
-        self.regions
-            .merge_all_components(self.theme, region_key)
-            .render(self)
-    }
-
     // **< Context PARAMS >*************************************************************************
 
     /// Recupera una *referencia tipada* al parámetro solicitado.
@@ -485,12 +471,6 @@ impl Contextual for Context {
         self
     }
 
-    #[builder_fn]
-    fn with_child_in(mut self, region_key: &'static str, op: ChildOp) -> Self {
-        self.regions.alter_child_in(region_key, op);
-        self
-    }
-
     // **< Contextual GETTERS >*********************************************************************
 
     fn request(&self) -> Option<&HttpRequest> {

src/core/theme.rs

@@ -15,10 +15,10 @@
 //! [`Theme`].
 
 mod definition;
-pub use definition::{Theme, ThemePage, ThemeRef, ThemeRegion};
+pub use definition::{Theme, ThemePage, ThemeRef};
 
 mod regions;
 pub(crate) use regions::{ChildrenInRegions, REGION_CONTENT};
-pub use regions::{InRegion, Region, RegionRef};
+pub use regions::{InRegion, Region};
 
 pub(crate) mod all;

src/core/theme/definition.rs

@@ -1,9 +1,9 @@
 use crate::core::extension::Extension;
-use crate::core::theme::{Region, RegionRef, REGION_CONTENT};
+use crate::core::theme::Region;
+use crate::global;
 use crate::html::{html, Markup};
 use crate::locale::L10n;
 use crate::response::page::Page;
-use crate::{global, join};
 
 use std::sync::LazyLock;
 
@@ -13,115 +13,54 @@ use std::sync::LazyLock;
 /// implementen [`Theme`] y, a su vez, [`Extension`].
 pub type ThemeRef = &'static dyn Theme;
 
-/// Conjunto de regiones que los temas pueden exponer para el renderizado.
-///
-/// `ThemeRegion` define un conjunto de regiones predefinidas para estructurar un documento HTML.
-/// Proporciona **identificadores estables** (vía [`Region::key()`]) y **etiquetas localizables**
-/// (vía [`Region::label()`]) a las regiones donde se añadirán los componentes.
-///
-/// Se usa por defecto en [`Theme::page_regions()`](crate::core::theme::Theme::page_regions) y sus
-/// variantes representan el conjunto mínimo recomendado para cualquier tema. Sin embargo, cada tema
-/// podría exponer su propio conjunto de regiones.
-pub enum ThemeRegion {
-    /// Cabecera de la página.
-    ///
-    /// Clave: `"header"`. Suele contener *branding*, navegación principal o avisos globales.
-    Header,
-
-    /// Contenido principal de la página (**obligatoria**).
-    ///
-    /// Clave: `"content"`. Es el destino por defecto para insertar componentes a nivel de página.
-    Content,
-
-    /// Pie de página.
-    ///
-    /// Clave: `"footer"`. Suele contener enlaces legales, créditos o navegación secundaria.
-    Footer,
-}
-
-impl Region for ThemeRegion {
-    fn key(&self) -> &str {
-        match self {
-            ThemeRegion::Header => "header",
-            ThemeRegion::Content => REGION_CONTENT,
-            ThemeRegion::Footer => "footer",
-        }
-    }
-
-    fn label(&self) -> L10n {
-        L10n::l(join!("region_", self.key()))
-    }
-}
-
 /// Métodos predefinidos de renderizado para las páginas de un tema.
 ///
-/// Contiene las implementaciones base para renderizar las **secciones** `<head>` y `<body>`. Se
+/// Contiene las implementaciones base de las **secciones** `<head>` y `<body>`. Se implementa
-/// implementa automáticamente para cualquier tipo que implemente [`Theme`], por lo que normalmente
+/// automáticamente para cualquier tipo que implemente [`Theme`], por lo que normalmente no requiere
-/// no requiere implementación explícita.
+/// implementación explícita.
 ///
-/// Si un tema **sobrescribe** uno o más de estos métodos de [`Theme`]:
+/// Si un tema **sobrescribe** [`render_page_head()`](Theme::render_page_head) o
-///
+/// [`render_page_body()`](Theme::render_page_body), se puede volver al comportamiento por defecto
-/// - [`render_page_region()`](Theme::render_page_region),
+/// cuando se necesite usando FQS (*Fully Qualified Syntax*):
-/// - [`render_page_head()`](Theme::render_page_head), o
-/// - [`render_page_body()`](Theme::render_page_body);
-///
-/// es posible volver al comportamiento por defecto usando FQS (*Fully Qualified Syntax*):
 ///
 /// - `<Self as ThemePage>::render_body(self, page, self.page_regions())`
 /// - `<Self as ThemePage>::render_head(self, page)`
 pub trait ThemePage {
-    /// Renderiza el **contenedor** de una región concreta del `<body>` de la página.
+    /// Renderiza el contenido del `<body>` de la página.
     ///
-    /// Obtiene los componentes asociados a `region.key()` desde el contexto de la página y, si hay
+    /// Recorre `regions` en el **orden declarado** y, para cada región con contenido, genera un
-    /// salida, envuelve el contenido en un contenedor `<div>` predefinido.
+    /// contenedor con `role="region"` y un `aria-label` localizado. Se asume que cada identificador
-    ///
+    /// de región es **único** dentro de la página.
-    /// Si la región **no produce contenido**, devuelve un `Markup` vacío.
+    fn render_body(&self, page: &mut Page, regions: &[(Region, L10n)]) -> Markup {
-    #[inline]
-    fn render_region(&self, page: &mut Page, region: RegionRef) -> Markup {
         html! {
-            @let key = region.key();
+            body id=[page.body_id().get()] class=[page.body_classes().get()] {
-            @let output = page.context().render_components_of(key);
+                @for (region, region_label) in regions {
+                    @let output = page.render_region(region.key());
                     @if !output.is_empty() {
+                        @let region_name = region.name();
                         div
-                    id=(key)
+                            id=(region_name)
-                    class={ "region region--" (key) }
+                            class={ "region region--" (region_name) }
                             role="region"
-                    aria-label=[region.label().lookup(page)]
+                            aria-label=[region_label.lookup(page)]
                         {
                             (output)
                         }
                     }
                 }
             }
-
-    /// Renderiza el **contenido interior** del `<body>` de la página.
-    ///
-    /// Recorre `regions` en el **orden declarado** y, para cada región con contenido, delega en
-    /// [`render_region()`](Self::render_region) la generación del contenedor. Las regiones sin
-    /// contenido **no** producen salida. Se asume que cada identificador de región es **único**
-    /// dentro de la página.
-    ///
-    /// La etiqueta `<body>` no se incluye aquí; únicamente renderiza su contenido.
-    #[inline]
-    fn render_body(&self, page: &mut Page, regions: &[RegionRef]) -> Markup {
-        html! {
-            @for region in regions {
-                (self.render_region(page, *region))
-            }
         }
     }
 
-    /// Renderiza el **contenido interior** del `<head>` de la página.
+    /// Renderiza el contenido del `<head>` de la página.
     ///
-    /// Incluye por defecto las etiquetas básicas (`charset`, `title`, `description`, `viewport`,
+    /// Por defecto incluye las etiquetas básicas (`charset`, `title`, `description`, `viewport`,
     /// `X-UA-Compatible`), los metadatos (`name/content`) y propiedades (`property/content`),
     /// además de los recursos CSS/JS de la página.
-    ///
-    /// La etiqueta `<head>` no se incluye aquí; únicamente se renderiza su contenido.
-    #[inline]
     fn render_head(&self, page: &mut Page) -> Markup {
         let viewport = "width=device-width, initial-scale=1, shrink-to-fit=no";
         html! {
+            head {
                 meta charset="utf-8";
 
                 @if let Some(title) = page.title() {
@@ -144,7 +83,8 @@ pub trait ThemePage {
                     meta property=(property) content=(content) {}
                 }
 
-            (page.context().render_assets())
+                (page.render_assets())
+            }
         }
     }
 }
@@ -185,53 +125,31 @@ pub trait Theme: Extension + ThemePage + Send + Sync {
 
     /// Declaración ordenada de las regiones disponibles en la página.
     ///
-    /// Retorna una **lista estática** de referencias ([`RegionRef`](crate::core::theme::RegionRef))
+    /// Devuelve una **lista estática** de pares `(Region, L10n)` que se usará para renderizar todas
-    /// que representan las regiones que el tema admite dentro del `<body>`.
+    /// las regiones que componen una página en el orden indicado .
     ///
-    /// Cada referencia apunta a una instancia que implementa [`Region`](crate::core::theme::Region)
+    /// Si un tema necesita un conjunto distinto de regiones, se puede **sobrescribir** este método
-    /// para definir cada región de forma segura y estable. Y si un tema necesita un conjunto
+    /// con los siguientes requisitos y recomendaciones:
-    /// distinto de regiones, puede **sobrescribir** este método siguiendo estas recomendaciones:
     ///
-    /// - Los identificadores devueltos por [`Region::key()`](crate::core::theme::Region::key)
+    /// - Los identificadores deben ser **estables** (p. ej. `"sidebar-left"`, `"content"`).
-    ///   deben ser **estables** (p. ej. `"sidebar-left"`, `"content"`).
+    /// - La región `"content"` es **obligatoria**. Se puede usar [`Region::default()`] para
-    /// - La región `"content"` es **obligatoria**, ya que se usa como destino por defecto para
+    ///   declararla.
-    ///   insertar componentes y renderizarlos.
+    /// - La etiqueta `L10n` se evalúa con el idioma activo de la página.
-    /// - El orden de la lista podría tener relevancia como **orden de renderizado** dentro del
-    ///   `<body>` segun la implementación de [`render_page_body()`](Self::render_page_body).
-    /// - Las etiquetas (`L10n`) de cada región se evaluarán con el idioma activo de la página.
     ///
-    /// # Ejemplo
+    /// Por defecto devuelve:
     ///
-    /// ```rust,ignore
+    /// - `"header"`: cabecera.
-    /// fn page_regions(&self) -> &'static [RegionRef] {
+    /// - `"content"`: contenido principal (**obligatoria**).
-    ///     static REGIONS: LazyLock<[RegionRef; 4]> = LazyLock::new(|| {
+    /// - `"footer"`: pie.
-    ///         [
+    fn page_regions(&self) -> &'static [(Region, L10n)] {
-    ///             &ThemeRegion::Header,
+        static REGIONS: LazyLock<[(Region, L10n); 3]> = LazyLock::new(|| {
-    ///             &ThemeRegion::Content,
-    ///             &ThemeRegion::Footer,
-    ///         ]
-    ///     });
-    ///     &*REGIONS
-    /// }
-    /// ```
-    fn page_regions(&self) -> &'static [RegionRef] {
-        static REGIONS: LazyLock<[RegionRef; 3]> = LazyLock::new(|| {
             [
-                &ThemeRegion::Header,
+                (Region::declare("header"), L10n::l("region_header")),
-                &ThemeRegion::Content,
+                (Region::default(), L10n::l("region_content")),
-                &ThemeRegion::Footer,
+                (Region::declare("footer"), L10n::l("region_footer")),
             ]
         });
-        &*REGIONS
+        &REGIONS[..]
-    }
-
-    /// Renderiza una región de la página.
-    ///
-    /// Si se sobrescribe este método, se puede volver al comportamiento base con:
-    /// `<Self as ThemePage>::render_region(self, page, region)`.
-    #[inline]
-    fn render_page_region(&self, page: &mut Page, region: RegionRef) -> Markup {
-        <Self as ThemePage>::render_region(self, page, region)
     }
 
     /// Acciones específicas del tema antes de renderizar el `<body>` de la página.

src/core/theme/regions.rs

@@ -1,6 +1,5 @@
 use crate::core::component::{Child, ChildOp, Children};
 use crate::core::theme::ThemeRef;
-use crate::locale::L10n;
 use crate::{builder_fn, AutoDefault, UniqueId};
 
 use parking_lot::RwLock;
@@ -19,95 +18,88 @@ static COMMON_REGIONS: LazyLock<RwLock<ChildrenInRegions>> =
 /// Nombre de la región de contenido por defecto (`"content"`).
 pub const REGION_CONTENT: &str = "content";
 
-/// Define la interfaz mínima que describe una **región de renderizado** dentro de una página.
+/// Identificador de una región de página.
 ///
-/// Una *región* representa una zona del documento HTML (por ejemplo: `"header"`, `"content"` o
+/// Incluye una **clave estática** ([`key()`](Self::key)) que identifica la región en el tema, y un
-/// `"sidebar-left"`), en la que se pueden incluir y renderizar componentes dinámicamente.
+/// **nombre normalizado** ([`name()`](Self::name)) en minúsculas para su uso en atributos HTML
+/// (p.ej., clases `region__{name}`).
 ///
-/// Este `trait` abstrae los metadatos básicos de cada región, esencialmente:
+/// Se utiliza para declarar las regiones que componen una página en un tema (ver
-///
+/// [`page_regions()`](crate::core::theme::Theme::page_regions)).
-/// - su **clave interna** (`key()`), que la identifica de forma única dentro de la página, y
+pub struct Region {
-/// - su **etiqueta localizada** (`label()`), que se usa como texto accesible (por ejemplo en
+    key: &'static str,
-///   `aria-label` o en descripciones semánticas del contenedor).
+    name: String,
-///
-/// Las implementaciones típicas son *enumeraciones estáticas* declaradas por cada tema (ver como
-/// ejemplo [`ThemeRegion`](crate::core::theme::ThemeRegion)), de modo que las claves y etiquetas
-/// permanecen inmutables y fácilmente referenciables.
-///
-/// # Ejemplo
-///
-/// ```rust
-/// use pagetop::prelude::*;
-///
-/// pub enum MyThemeRegion {
-///     Header,
-///     Content,
-///     Footer,
-/// }
-///
-/// impl Region for MyThemeRegion {
-///     fn key(&self) -> &str {
-///         match self {
-///             MyThemeRegion::Header => "header",
-///             MyThemeRegion::Content => "content",
-///             MyThemeRegion::Footer => "footer",
-///         }
-///     }
-///
-///     fn label(&self) -> L10n {
-///         L10n::l(join!("region__", self.key()))
-///     }
-/// }
-/// ```
-pub trait Region: Send + Sync {
-    /// Devuelve la **clave interna** que identifica de forma única una región.
-    ///
-    /// La clave se utiliza para asociar los componentes de la región con su contenedor HTML
-    /// correspondiente. Por convención, se emplean nombres en minúsculas y con guiones (`"header"`,
-    /// `"main"`, `"sidebar-right"`, etc.), y la región `"content"` es **obligatoria** en todos los
-    /// temas.
-    fn key(&self) -> &str;
-
-    /// Devuelve la **etiqueta localizada** (`L10n`) asociada a la región.
-    ///
-    /// Esta etiqueta se evalúa en el idioma activo de la página y se utiliza principalmente para
-    /// accesibilidad, como el valor de `aria-label` en el contenedor generado por
-    /// [`ThemePage::render_region()`](crate::core::theme::ThemePage::render_region).
-    fn label(&self) -> L10n;
 }
 
-/// Referencia estática a una región.
+impl Default for Region {
-pub type RegionRef = &'static dyn Region;
+    #[inline]
+    fn default() -> Self {
+        Self {
+            key: REGION_CONTENT,
+            name: REGION_CONTENT.to_string(),
+        }
+    }
+}
+
+impl Region {
+    /// Declara una región a partir de su clave estática.
+    ///
+    /// Genera además un nombre normalizado de la clave, eliminando espacios iniciales y finales,
+    /// convirtiendo a minúsculas y sustituyendo los espacios intermedios por guiones (`-`).
+    ///
+    /// Esta clave se usará para añadir componentes a la región; por ello se recomiendan nombres
+    /// sencillos, limitando los caracteres a `[a-z0-9-]` (p.ej., `"sidebar"` o `"main-menu"`), cuyo
+    /// nombre normalizado coincidirá con la clave.
+    #[inline]
+    pub fn declare(key: &'static str) -> Self {
+        Self {
+            key,
+            name: key.trim().to_ascii_lowercase().replace(' ', "-"),
+        }
+    }
+
+    /// Devuelve la clave estática asignada a la región.
+    #[inline]
+    pub fn key(&self) -> &'static str {
+        self.key
+    }
+
+    /// Devuelve el nombre normalizado de la región (para atributos y búsquedas).
+    #[inline]
+    pub fn name(&self) -> &str {
+        &self.name
+    }
+}
 
 // Contenedor interno de componentes agrupados por región.
 #[derive(AutoDefault)]
 pub struct ChildrenInRegions(HashMap<&'static str, Children>);
 
 impl ChildrenInRegions {
-    pub fn with(region_key: &'static str, child: Child) -> Self {
+    pub fn with(region_name: &'static str, child: Child) -> Self {
-        ChildrenInRegions::default().with_child_in(region_key, ChildOp::Add(child))
+        ChildrenInRegions::default().with_child_in(region_name, ChildOp::Add(child))
     }
 
     #[builder_fn]
-    pub fn with_child_in(mut self, region_key: &'static str, op: ChildOp) -> Self {
+    pub fn with_child_in(mut self, region_name: &'static str, op: ChildOp) -> Self {
-        if let Some(region) = self.0.get_mut(region_key) {
+        if let Some(region) = self.0.get_mut(region_name) {
             region.alter_child(op);
         } else {
-            self.0.insert(region_key, Children::new().with_child(op));
+            self.0.insert(region_name, Children::new().with_child(op));
         }
         self
     }
 
-    pub fn merge_all_components(&self, theme_ref: ThemeRef, region_key: &'static str) -> Children {
+    pub fn merge_all_components(&self, theme_ref: ThemeRef, region_name: &'static str) -> Children {
         let common = COMMON_REGIONS.read();
         if let Some(r) = THEME_REGIONS.read().get(&theme_ref.type_id()) {
             Children::merge(&[
-                common.0.get(region_key),
+                common.0.get(region_name),
-                self.0.get(region_key),
+                self.0.get(region_name),
-                r.0.get(region_key),
+                r.0.get(region_name),
             ])
         } else {
-            Children::merge(&[common.0.get(region_key), self.0.get(region_key)])
+            Children::merge(&[common.0.get(region_name), self.0.get(region_name)])
         }
     }
 }
@@ -122,9 +114,9 @@ impl ChildrenInRegions {
 pub enum InRegion {
     /// Región de contenido por defecto.
     Content,
-    /// Región identificada por la clave proporcionado.
+    /// Región identificada por el nombre proporcionado.
-    Key(&'static str),
+    Named(&'static str),
-    /// Región identificada por una clave para un tema concreto.
+    /// Región identificada por un nombre y asociada a un tema concreto.
     OfTheme(&'static str, ThemeRef),
 }
 
@@ -142,7 +134,7 @@ impl InRegion {
     /// )));
     ///
     /// // Texto en la región "sidebar".
-    /// InRegion::Key("sidebar").add(Child::with(Html::with(|_|
+    /// InRegion::Named("sidebar").add(Child::with(Html::with(|_|
     ///     html! { ("Publicidad") }
     /// )));
     /// ```
@@ -153,19 +145,19 @@ impl InRegion {
                     .write()
                     .alter_child_in(REGION_CONTENT, ChildOp::Add(child));
             }
-            InRegion::Key(region_key) => {
+            InRegion::Named(region_name) => {
                 COMMON_REGIONS
                     .write()
-                    .alter_child_in(region_key, ChildOp::Add(child));
+                    .alter_child_in(region_name, ChildOp::Add(child));
             }
-            InRegion::OfTheme(region_key, theme_ref) => {
+            InRegion::OfTheme(region_name, theme_ref) => {
                 let mut regions = THEME_REGIONS.write();
                 if let Some(r) = regions.get_mut(&theme_ref.type_id()) {
-                    r.alter_child_in(region_key, ChildOp::Add(child));
+                    r.alter_child_in(region_name, ChildOp::Add(child));
                 } else {
                     regions.insert(
                         theme_ref.type_id(),
-                        ChildrenInRegions::with(region_key, child),
+                        ChildrenInRegions::with(region_name, child),
                     );
                 }
             }

src/response/page.rs

@@ -5,7 +5,7 @@ pub use actix_web::Result as ResultPage;
 
 use crate::base::action;
 use crate::core::component::{Child, ChildOp, Component, Context, ContextOp, Contextual};
-use crate::core::theme::{ThemeRef, REGION_CONTENT};
+use crate::core::theme::{ChildrenInRegions, ThemeRef, REGION_CONTENT};
 use crate::html::{html, Markup, DOCTYPE};
 use crate::html::{Assets, Favicon, JavaScript, StyleSheet};
 use crate::html::{AttrClasses, ClassesOp};
@@ -29,6 +29,7 @@ pub struct Page {
     body_id     : AttrId,
     body_classes: AttrClasses,
     context     : Context,
+    regions     : ChildrenInRegions,
 }
 
 impl Page {
@@ -46,6 +47,7 @@ impl Page {
             body_id     : AttrId::default(),
             body_classes: AttrClasses::default(),
             context     : Context::new(Some(request)),
+            regions     : ChildrenInRegions::default(),
         }
     }
 
@@ -103,37 +105,48 @@ impl Page {
     /// **Obsoleto desde la versión 0.4.0**: usar [`add_component_in()`](Self::add_component_in) en
     /// su lugar.
     #[deprecated(since = "0.4.0", note = "Use `add_component_in()` instead")]
-    pub fn with_component_in(self, region_key: &'static str, component: impl Component) -> Self {
+    pub fn with_component_in(self, region_name: &'static str, component: impl Component) -> Self {
-        self.add_component_in(region_key, component)
+        self.add_component_in(region_name, component)
     }
 
     /// Añade un componente a la región de contenido por defecto.
     pub fn add_component(mut self, component: impl Component) -> Self {
-        self.context
+        self.regions
             .alter_child_in(REGION_CONTENT, ChildOp::Add(Child::with(component)));
         self
     }
 
-    /// Añade un componente en una región (`region_key`) de la página.
+    /// Añade un componente en una región (`region_name`) de la página.
-    pub fn add_component_in(mut self, region_key: &'static str, component: impl Component) -> Self {
+    pub fn add_component_in(
-        self.context
+        mut self,
-            .alter_child_in(region_key, ChildOp::Add(Child::with(component)));
+        region_name: &'static str,
+        component: impl Component,
+    ) -> Self {
+        self.regions
+            .alter_child_in(region_name, ChildOp::Add(Child::with(component)));
         self
     }
 
     /// **Obsoleto desde la versión 0.4.0**: usar [`with_child_in()`](Self::with_child_in) en su
     /// lugar.
     #[deprecated(since = "0.4.0", note = "Use `with_child_in()` instead")]
-    pub fn with_child_in_region(mut self, region_key: &'static str, op: ChildOp) -> Self {
+    pub fn with_child_in_region(mut self, region_name: &'static str, op: ChildOp) -> Self {
-        self.alter_child_in(region_key, op);
+        self.alter_child_in(region_name, op);
         self
     }
 
     /// **Obsoleto desde la versión 0.4.0**: usar [`alter_child_in()`](Self::alter_child_in) en su
     /// lugar.
     #[deprecated(since = "0.4.0", note = "Use `alter_child_in()` instead")]
-    pub fn alter_child_in_region(&mut self, region_key: &'static str, op: ChildOp) -> &mut Self {
+    pub fn alter_child_in_region(&mut self, region_name: &'static str, op: ChildOp) -> &mut Self {
-        self.alter_child_in(region_key, op);
+        self.alter_child_in(region_name, op);
+        self
+    }
+
+    /// Opera con [`ChildOp`] en una región (`region_name`) de la página.
+    #[builder_fn]
+    pub fn with_child_in(mut self, region_name: &'static str, op: ChildOp) -> Self {
+        self.regions.alter_child_in(region_name, op);
         self
     }
 
@@ -180,6 +193,18 @@ impl Page {
 
     // **< Page RENDER >****************************************************************************
 
+    /// Renderiza los componentes de una región (`region_name`) de la página.
+    pub fn render_region(&mut self, region_name: &'static str) -> Markup {
+        self.regions
+            .merge_all_components(self.context.theme(), region_name)
+            .render(&mut self.context)
+    }
+
+    /// Renderiza los recursos de la página.
+    pub fn render_assets(&mut self) -> Markup {
+        self.context.render_assets()
+    }
+
     /// Renderiza la página completa en formato HTML.
     ///
     /// Ejecuta las acciones correspondientes antes y después de renderizar el `<body>`,
@@ -213,14 +238,8 @@ impl Page {
         Ok(html! {
             (DOCTYPE)
             html lang=(lang) dir=(dir) {
-                head {
                 (head)
-                }
-                body id=[self.body_id().get()] class=[self.body_classes().get()] {
-                    (self.context.render_components_of("page-top"))
                 (body)
-                    (self.context.render_components_of("page-bottom"))
-                }
             }
         })
     }
@@ -271,12 +290,6 @@ impl Contextual for Page {
         self
     }
 
-    #[builder_fn]
-    fn with_child_in(mut self, region_key: &'static str, op: ChildOp) -> Self {
-        self.context.alter_child_in(region_key, op);
-        self
-    }
-
     // **< Contextual GETTERS >*********************************************************************
 
     fn request(&self) -> Option<&HttpRequest> {

static/css/basic.css

@@ -1,19 +1,3 @@
-html {
-    scroll-behavior: smooth;
-}
-
-body {
-	margin: 0;
-	font-family: var(--val-font-family);
-	font-size: var(--val-fs--base);
-	font-weight: var(--val-fw--base);
-	line-height: var(--val-lh--base);
-	color: var(--val-color--text);
-	background-color: var(--val-color--bg);
-	-webkit-text-size-adjust: 100%;
-	-webkit-tap-highlight-color: transparent;
-}
-
 /* Page layout */
 
 .region--footer {

static/css/intro.css

@@ -1,15 +1,37 @@
+:root {
+	--bg-img: url('/img/intro-header.jpg');
+	--bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--bg-img) type('image/jpeg'));
+	--bg-img-sm: url('/img/intro-header-sm.jpg');
+	--bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--bg-img-sm) type('image/jpeg'));
+	--bg-color: #8c5919;
+	--color: #1a202c;
+	--color-gray: #e4e4e7;
+	--color-link: #1e4eae;
+	--color-block-1: #b689ff;
+	--color-block-2: #fecaca;
+	--color-block-3: #e6a9e2;
+	--color-block-4: #ffedca;
+	--color-block-5: #ffffff;
+	--focus-outline: 2px solid var(--color-link);
+	--focus-outline-offset: 2px;
+	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
 html {
 	min-height: 100%;
 	background-color: black;
 }
-
 body {
 	margin: auto;
 	position: relative;
 	min-height: 100%;
 	min-width: 350px;
-	color: var(--intro-color);
+	background-color: var(--bg-color);
-	background-color: var(--intro-bg-color);
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	font-size: 1.125rem;
+	font-weight: 300;
+	color: var(--color);
+	line-height: 1.6;
 
 	width: 100%;
 	display: flex;
@@ -29,12 +51,12 @@ a {
 	transition: font-size 0.2s, text-decoration-color 0.2s;
 }
 a:focus-visible {
-	outline: var(--intro-focus-outline);
+	outline: var(--focus-outline);
-	outline-offset: var(--intro-focus-outline-offset);
+	outline-offset: var(--focus-outline-offset);
 }
 a:hover,
 a:hover:visited {
-	text-decoration-color: var(--intro-color-link);
+	text-decoration-color: var(--color-link);
 }
 
 /*
@@ -47,9 +69,9 @@ a:hover:visited {
 	width: 100%;
 	max-width: 80rem;
 	margin: 0 auto;
-	padding-bottom: 4rem;
+	padding-bottom: 9rem;
-	background-image: var(--intro-bg-img-sm);
+	background-image: var(--bg-img-sm);
-	background-image: var(--intro-bg-img-sm-set);
+	background-image: var(--bg-img-sm-set);
 	background-position: top center;
 	background-position-y: -1rem;
 	background-size: contain;
@@ -97,8 +119,8 @@ a:hover:visited {
 }
 @media (min-width: 64rem) {
 	.intro-header {
-		background-image: var(--intro-bg-img);
+		background-image: var(--bg-img);
-		background-image: var(--intro-bg-img-set);
+		background-image: var(--bg-img-set);
 	}
 	.intro-header__title {
 		padding: 1.2rem 2rem 2.6rem 2rem;
@@ -158,7 +180,8 @@ a:hover:visited {
 
 .intro-button {
 	width: 100%;
-	margin: 0 auto;
+	margin: 0 auto 3rem;
+	z-index: 10;
 }
 .intro-button__link {
 	background: #7f1d1d;
@@ -283,9 +306,6 @@ a:hover:visited {
 	animation-play-state: paused;
 }
 @media (max-width: 48rem) {
-	.intro-header {
-		padding-bottom: 9rem;;
-	}
 	.intro-button__link {
 		height: 6.25rem;
 		min-width: auto;
@@ -322,15 +342,17 @@ a:hover:visited {
 	font-size: 1.3125rem;
 	font-weight: 400;
 	line-height: 1.5;
+	margin-top: -6rem;
 	margin-bottom: 0;
 	background: #fff;
 	position: relative;
-}
-.region--content {
 	padding: 2.5rem 1.063rem 0.75rem;
 	overflow: hidden;
 }
-.region--content p {
+.intro-button + .intro-text {
+	padding-top: 6rem;
+}
+.intro-text p {
 	width: 100%;
 	line-height: 150%;
 	font-weight: 400;
@@ -342,39 +364,31 @@ a:hover:visited {
 		font-size: 1.375rem;
 		line-height: 2rem;
 	}
-	.intro-button + .region--content {
+	.intro-button + .intro-text {
 		padding-top: 7rem;
 	}
 }
 @media (min-width: 64rem) {
-	.intro-header {
-		padding-bottom: 9rem;;
-	}
-	.intro-text,
-	.region--content {
-		border-radius: 0.75rem;
-	}
 	.intro-text {
-		box-shadow: var(--intro-shadow);
+		border-radius: 0.75rem;
+		box-shadow: var(--shadow);
 		max-width: 60rem;
 		margin: 0 auto 6rem;
-	}
-	.region--content {
 		padding-left: 4.5rem;
 		padding-right: 4.5rem;
 	}
 }
 
-.region--content .block {
+.intro-text .block {
 	position: relative;
 }
-.region--content .block__title {
+.intro-text .block__title {
 	margin: 1em 0 .8em;
 }
-.region--content .block__title span {
+.intro-text .block__title span {
 	display: inline-block;
 	padding: 10px 30px 14px;
-	margin: 30px 0 0 20px;
+	margin: 0 0 0 20px;
 	background: white;
 	border: 5px solid;
 	border-radius: 30px;
@@ -382,7 +396,7 @@ a:hover:visited {
 	border-color: orangered;
 	transform: rotate(-3deg) translateY(-25%);
 }
-.region--content .block__title:before {
+.intro-text .block__title:before {
 	content: "";
 	height: 5px;
 	position: absolute;
@@ -395,7 +409,7 @@ a:hover:visited {
 	transform: rotate(2deg) translateY(-50%);
 	transform-origin: top left;
 }
-.region--content .block__title:after {
+.intro-text .block__title:after {
 	content: "";
 	height: 70rem;
 	position: absolute;
@@ -403,23 +417,23 @@ a:hover:visited {
 	left: -15%;
 	width: 130%;
 	z-index: -10;
-	background: var(--intro-bg-block-1);
+	background: var(--color-block-1);
 	transform: rotate(2deg);
 }
-.region--content .block:nth-of-type(5n+1) .block__title:after {
+.intro-text .block:nth-of-type(5n+1) .block__title:after {
-	background: var(--intro-bg-block-1);
+	background: var(--color-block-1);
 }
-.region--content .block:nth-of-type(5n+2) .block__title:after {
+.intro-text .block:nth-of-type(5n+2) .block__title:after {
-	background: var(--intro-bg-block-2);
+	background: var(--color-block-2);
 }
-.region--content .block:nth-of-type(5n+3) .block__title:after {
+.intro-text .block:nth-of-type(5n+3) .block__title:after {
-	background: var(--intro-bg-block-3);
+	background: var(--color-block-3);
 }
-.region--content .block:nth-of-type(5n+4) .block__title:after {
+.intro-text .block:nth-of-type(5n+4) .block__title:after {
-	background: var(--intro-bg-block-4);
+	background: var(--color-block-4);
 }
-.region--content .block:nth-of-type(5n+5) .block__title:after {
+.intro-text .block:nth-of-type(5n+5) .block__title:after {
-	background: var(--intro-bg-block-5);
+	background: var(--color-block-5);
 }
 
 /*
@@ -429,7 +443,7 @@ a:hover:visited {
 .intro-footer {
 	width: 100%;
 	background-color: black;
-	color: var(--intro-color-gray);
+	color: var(--color-gray);
 	padding-bottom: 2rem;
 }
 
@@ -445,7 +459,7 @@ a:hover:visited {
 	line-height: 100%;
 }
 .intro-footer__body a:visited {
-	color: var(--intro-color-gray);
+	color: var(--color-gray);
 }
 .intro-footer__logo,
 .intro-footer__links {
@@ -478,5 +492,5 @@ a:hover:visited {
 /* PoweredBy component */
 
 .poweredby a:visited {
-	color: var(--intro-color-gray);
+	color: var(--color-gray);
 }

static/css/menu.css

@@ -1,92 +1,54 @@
-/* Aislamiento & normalización */
-
 .menu {
-	isolation: isolate;
-}
-@supports (all: revert) {
-	.menu {
-		all: revert;
-		display: block; }
-}
-.menu {
-	box-sizing: border-box;
-	line-height: var(--val-menu--line-height, 1.5);
-	color: var(--val-color--text);
-	text-align: left;
-	text-transform: none;
-	letter-spacing: normal;
-	word-spacing: normal;
-	white-space: normal;
-	cursor: default;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-
 	width: 100%;
 	height: auto;
 	margin: 0;
 	padding: 0;
 	z-index: 9999;
-	border: 0;
+	border: none;
+	outline: none;
 	background: var(--val-menu--color-bg);
 }
-.menu *,
-.menu *::before,
-.menu *::after {
-	box-sizing: inherit;
-}
-.menu :where(a, button) {
-	appearance: none;
-	background: none;
-	border: 0;
-	font: inherit;
-	color: inherit;
-	text-decoration: none;
-	cursor: pointer;
-	-webkit-tap-highlight-color: transparent;
-}
-.menu :where(a, button):focus-visible {
-	outline: 2px solid var(--val-menu--color-highlight);
-	outline-offset: 2px;
-}
-.menu :where(ul, ol) {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.menu svg {
-	fill: currentColor;
-}
-
-/* Estructura */
 
 .menu__wrapper {
 	padding-right: var(--val-gap);
 }
+.menu__wrapper a,
+.menu__wrapper button {
+	cursor: pointer;
+	border: none;
+	background: none;
+	text-decoration: none;
+}
 
+.menu__nav ul {
+	margin: 0;
+	padding: 0;
+}
 .menu__nav li {
 	display: inline-block;
-	margin: 0;
+	margin: 0 0 0 1.5rem;
-	margin-inline-start: 1.5rem;
 	padding: 0;
 	line-height: var(--val-menu--item-height);
 	list-style: none;
+	list-style-type: none;
 }
 
 .menu__item--label,
-.menu__nav li > .menu__link {
+.menu__nav li > a {
 	position: relative;
-	font-weight: normal;
+	font-weight: 500;
+	color: var(--val-color--text);
 	text-rendering: optimizeLegibility;
-	font-size: 1.45rem;
 }
-.menu__nav li > .menu__link {
+.menu__nav li > a {
+	border: none;
 	transition: color 0.3s ease-in-out;
 }
-.menu__nav li:hover > .menu__link,
+.menu__nav li:hover > a,
-.menu__nav li > .menu__link:focus {
+.menu__nav li > a:focus {
 	color: var(--val-menu--color-highlight);
 }
-.menu__nav li > .menu__link > svg.icon {
+.menu__nav li > a > svg.icon {
 	margin-left: 0.25rem;
 }
 
@@ -95,18 +57,19 @@
 	max-width: 100%;
 	height: auto;
 	padding: var(--val-gap-0-5) var(--val-gap-1-5);
-	border: 0;
+	border: none;
+	outline: none;
 	background: var(--val-menu--color-bg);
 	border-top: 3px solid var(--val-menu--color-highlight);
 	z-index: 500;
 	opacity: 0;
 	visibility: hidden;
 	box-shadow: 0 4px 6px -1px var(--val-menu--color-border), 0 2px 4px -1px var(--val-menu--color-shadow);
-	transition: all 0.3s ease-in-out;
+	transition: all 0.5s ease-in-out;
 }
 
 .menu__item--children:hover > .menu__children,
-.menu__item--children > .menu__link:focus + .menu__children,
+.menu__item--children > a:focus + .menu__children,
 .menu__item--children .menu__children:focus-within {
 	margin-top: 0.4rem;
 	opacity: 1;
@@ -118,12 +81,14 @@
 	max-width: var(--val-menu--item-width-max);
 }
 .menu__submenu-title {
+	font-family: inherit;
 	font-size: 1rem;
-	font-weight: normal;
+	font-weight: 500;
 	margin: 0;
 	padding: var(--val-menu--line-padding) 0;
 	line-height: var(--val-menu--line-height);
-	border: 0;
+	border: none;
+	outline: none;
 	color: var(--val-menu--color-highlight);
 	text-transform: uppercase;
 	text-rendering: optimizeLegibility;
@@ -148,15 +113,18 @@
 	display: none;
 }
 
-/* Responsive <= 62rem (992px) */
+/* Applies <= 992px */
-
+@media only screen and (max-width: 62rem) {
-@media (max-width: 62rem) {
 	.menu__wrapper {
 		padding-right: var(--val-gap-0-5);
 	}
 	.menu__trigger {
+		cursor: pointer;
 		width: var(--val-menu--trigger-width);
 		height: var(--val-menu--item-height);
+		border: none;
+		outline: none;
+		background: none;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -165,13 +133,6 @@
 		width: 2rem;
 		height: 2rem;
 	}
-
-	.menu__nav,
-	.menu__children {
-		overscroll-behavior: contain;
-		-webkit-overflow-scrolling: touch;
-	}
-
 	.menu__nav {
 		position: fixed;
 		top: 0;
@@ -182,16 +143,10 @@
 		overflow: hidden;
 		background: var(--val-menu--color-bg);
 		transform: translate(-100%);
-		transition: transform .5s ease-in-out, opacity .5s ease-in-out;
+		transition: all 0.5s ease-in-out;
-		will-change: transform;
-		backface-visibility: hidden;
-		visibility: hidden;
-		pointer-events: none;
 	}
 	.menu__nav.active {
 		transform: translate(0%);
-		visibility: visible;
-		pointer-events: auto;
 	}
 
 	.menu__nav li {
@@ -201,18 +156,16 @@
 	}
 
 	.menu__item--label,
-	.menu__nav li > .menu__link {
+	.menu__nav li > a {
 		display: block;
-		text-align: inherit;
-		width: 100%;
 		padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap);
 		border-bottom: 1px solid var(--val-menu--color-border);
 	}
 	.menu__nav li ul li.menu__item--label,
-	.menu__nav li ul li > .menu__link {
+	.menu__nav li ul li > a {
 		border-bottom: 0;
 	}
-	.menu__nav li > .menu__link > svg.icon {
+	.menu__nav li > a > svg.icon {
 		position: absolute;
 		top: var(--val-menu--line-padding);
 		right: var(--val-menu--line-padding);
@@ -238,7 +191,6 @@
 		visibility: visible;
 		transform: translateX(0%);
 		box-shadow: none;
-		transition: opacity .5s ease-in-out, transform .5s ease-in-out, margin-top .5s ease-in-out;
 	}
 	.menu__children.active {
 		display: block;
@@ -271,16 +223,6 @@
 		white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-		font-size: 1.45rem;
-		font-weight: normal;
-		opacity: 0;
-		transform: translateY(.25rem);
-		transition: opacity .5s ease-in-out, transform .5s ease-in-out;
-		will-change: opacity, transform;
-	}
-	.menu__header.active .menu__title {
-		opacity: 1;
-		transform: translateY(0);
 	}
 	.menu__close,
 	.menu__back {
@@ -289,20 +231,18 @@
 		height: var(--val-menu--item-height);
 		line-height: var(--val-menu--item-height);
 		color: var(--val-color--text);
+		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: var(--val-menu--color-bg);
 	}
 	.menu__close {
 		font-size: 2.25rem;
-		border: 1px solid var(--val-menu--color-border) !important;
+		border-left: 1px solid var(--val-menu--color-border) !important;
-		border-width: 0 0 1px 1px !important;
 	}
 	.menu__back {
 		font-size: 1.25rem;
-		border: 1px solid var(--val-menu--color-border) !important;
+		border-right: 1px solid var(--val-menu--color-border) !important;
-		border-width: 0 1px 1px 0 !important;
 		display: none;
 	}
 	.menu__header.active .menu__back {
@@ -327,34 +267,15 @@
 		opacity: 0;
 		visibility: hidden;
 		background: rgba(0, 0, 0, 0.55);
-		transition: opacity .5s ease-in-out, visibility 0s linear .5s;
+		transition: all 0.5s ease-in-out;
 	}
 	.menu__overlay.active {
 		opacity: 1;
 		visibility: visible;
-		transition-delay: 0s, 0s;
 	}
 }
 
-@media (hover: hover) and (pointer: fine) {
+/* ANIMATIONS */
-	.menu__item--children:hover > .menu__children {
-		margin-top: 0.4rem;
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.menu__nav,
-	.menu__children,
-	.menu__title,
-	.menu__overlay {
-		transition: none !important;
-		animation: none !important;
-	}
-}
-
-/* Animaciones */
 
 @keyframes slideLeft {
 	0% {

static/css/root.css

@@ -1,22 +1,3 @@
-:root {
-	--intro-bg-img: url('/img/intro-header.jpg');
-	--intro-bg-img-set: image-set(url('/img/intro-header.avif') type('image/avif'), url('/img/intro-header.webp') type('image/webp'), var(--intro-bg-img) type('image/jpeg'));
-	--intro-bg-img-sm: url('/img/intro-header-sm.jpg');
-	--intro-bg-img-sm-set: image-set(url('/img/intro-header-sm.avif') type('image/avif'), url('/img/intro-header-sm.webp') type('image/webp'), var(--intro-bg-img-sm) type('image/jpeg'));
-	--intro-bg-color: #8c5919;
-	--intro-bg-block-1: #b689ff;
-	--intro-bg-block-2: #fecaca;
-	--intro-bg-block-3: #e6a9e2;
-	--intro-bg-block-4: #ffedca;
-	--intro-bg-block-5: #ffffff;
-	--intro-color: #1a202c;
-	--intro-color-gray: #e4e4e7;
-	--intro-color-link: #1e4eae;
-	--intro-focus-outline: 2px solid var(--intro-color-link);
-	--intro-focus-outline-offset: 2px;
-	--intro-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-}
-
 :root {
 	--val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 	--val-font-serif: "Lora","georgia",serif;

static/js/menu.js

@@ -48,6 +48,7 @@ function menu__reset(menu, nav, overlay) {
 }
 
 document.querySelectorAll('.menu').forEach(menu => {
+
 	let menuChildren = [];
 	const menuNav = menu.querySelector('.menu__nav');
 	const menuOverlay = menu.querySelector('.menu__overlay');