L1 · Inicio
La portada del sitio: la única raíz. Presenta el negocio y reparte hacia las secciones.
Ver nivel Guía del sitio · Niveles
Los niveles: la profundidad del sitio
Un sitio no es un montón de páginas sueltas: es un árbol de cuatro niveles de profundidad —inicio, índice de sección, detalle y sub-detalle—. Cada nivel tiene un trabajo distinto. Aquí están los cuatro, cada uno con su página a fondo.
Esta página es el mapa de la jerarquía del sitio. Mientras la serie Módulos documenta las piezas con las que se arma cada página, Niveles documenta los tipos de página por su lugar en el árbol: cuál es la raíz, cuál lista, cuál detalla y cuál cierra. Saber en qué nivel estás define qué contenido va, qué migas de pan llevas y a dónde envías al visitante.
Y todo descansa en el mismo principio que el resto del sistema: una jerarquía clara y una sola fuente de verdad. La profundidad de una página determina sus migas, su plantilla y su rol en el SEO —de la raíz a la hoja—; nombrarla por su nivel evita inventar estructuras nuevas en cada sección.
Concepto
¿Qué es un nivel?
La profundidad de una página en el árbol del sitio, contada desde la raíz: L1 inicio, L2 índice de sección, L3 detalle, L4 sub-detalle. El nivel define el rol de la página, sus migas de pan y su plantilla.
Un nivel es la distancia de una página a la raíz. La home es L1; una sección que lista (productos, servicios, módulos) es L2; la ficha de una entidad concreta es L3; y la sub-ficha de algo que se subdivide es L4. No es una etiqueta decorativa: el nivel determina qué contenido lleva la página, cuántas migas de pan muestra y qué plantilla usa.
Pensar el sitio por niveles —y no como pantallas inconexas— es lo que mantiene la navegación predecible. El visitante siempre sabe dónde está (las migas lo dicen), el buscador entiende la jerarquía, y quien edita no inventa una estructura nueva por sección: cada página entra en uno de cuatro moldes conocidos.
El índice
Los 4 niveles del sitio
Los 4 niveles, cada uno como tarjeta: foto, nombre, qué hace y las ideas clave que lo definen. Entra a cualquiera para verlo a fondo.
Cada tarjeta es un tipo de página real del sitio: foto, nombre, qué rol cumple y las ideas que lo distinguen. Es el MISMO card del catálogo —no inventamos un diseño aparte—, porque la coherencia es justo lo que esta serie enseña.
Entra a cualquiera para verlo a fondo: qué problema resuelve, de qué partes se compone, qué migas de pan lleva y cómo se construye en esta plantilla.
L2 · Índice de sección
El catálogo de una sección: explica de qué va y lista sus hijos (productos, servicios, módulos…).
Ver nivelL3 · Detalle
La ficha de UNA entidad a fondo: un producto, un servicio, un módulo, un artículo.
Ver nivelL4 · Sub-detalle
El nivel más profundo: variantes o sub-fichas cuando una entidad se subdivide.
Ver nivelPor dentro
Cada nivel, por dentro
El índice te dice qué es cada nivel; aquí lo abrimos. Mismo formato para todos: qué rol cumple, qué migas de pan lleva y de qué partes se compone.
Es el mismo bloque «a fondo» del catálogo del home —información a la izquierda, galería a la derecha, idéntico para cada nivel—. Reusar el patrón es, otra vez, la lección: el sitio se arma con piezas que ya existen.
Aquí está cada nivel abierto con la misma estructura: qué resuelve, qué profundidad de migas lleva y de qué partes se compone. Los mismos niveles que ves arriba como tarjetas.
El nivel a fondo
L1 · Inicio
El nivel 1 es la portada: la única página raíz del sitio, en /. Es lo primero que ve quien llega por la marca o por una campaña, y hace dos trabajos a la vez —presentar el negocio en segundos y repartir el tráfico hacia las secciones—. No es un catálogo ni una ficha: es el mapa de bienvenida que decide a dónde va cada visitante.
Su anatomía en esta plantilla: hero con un H1 único, una franja de atajos (SectionMenu), la vitrina de categorías (CategoryCard), bloques «a fondo» (CategoryDetail), prueba social, preguntas frecuentes y un cierre de conversión. No lleva migas de pan —es el origen de la jerarquía, no tiene padre—. Vive en src/pages/index.astro.
- Una sola por sitio: la raíz en / (no se repite ni se anida)
- Doble trabajo: presentar el negocio y repartir hacia las secciones
- Sin migas de pan: es el origen de la jerarquía, no tiene padre
- Anatomía: hero → atajos → vitrina → a fondo → reseñas → FAQ → cierre
El nivel a fondo
L2 · Índice de sección
El nivel 2 es el índice de una sección: la página que explica de qué va una rama del sitio y lista sus hijos. /modulos, /productos, /servicios y /blog son todos L2. Su trabajo es orientar —decir «esto es lo que hay aquí»— y mandar al visitante a la ficha correcta sin que tenga que adivinar.
Lleva migas de un nivel (Inicio › Sección) y casi siempre una rejilla de tarjetas (CategoryCard, ProductCard) generada desde una sola fuente de datos. La regla del sitio: el índice NO inventa diseño por sección —reusa la misma vitrina— para que productos, servicios y módulos se vean y se naveguen igual.
- Lista los hijos de una rama: /modulos, /productos, /servicios, /blog
- Migas de un nivel: Inicio › Sección
- Rejilla de cards data-driven desde una sola lista (SSoT)
- Mismo molde de vitrina para todas las secciones: cero diseño duplicado
El nivel a fondo
L3 · Detalle
El nivel 3 es la ficha: UNA entidad explicada a fondo. /modulos/topbar, /productos/equipo-base, /servicios/consultoria y cada artículo del blog son L3. Aquí el visitante ya eligió qué le interesa; la página entrega todo lo que necesita para decidir —qué es, para qué sirve, cómo es por dentro y el siguiente paso—.
Es justo el tipo de página que estás leyendo. Lleva migas de dos niveles (Inicio › Sección › Item) y, en esta plantilla, sigue un molde fijo de 10 secciones (el de la serie Módulos): hero sin CTAs, títulos duo, anatomía con ejemplo en vivo, variantes, responsive, sí/no y cierre. Reusar el molde es lo que mantiene todas las fichas coherentes.
- Una entidad a fondo: un módulo, un producto, un servicio, un artículo
- Migas de dos niveles: Inicio › Sección › Item
- Molde fijo de 10 secciones (lo define la serie Módulos)
- El visitante ya eligió: la ficha entrega todo para decidir
El nivel a fondo
L4 · Sub-detalle
El nivel 4 es el más profundo: la sub-ficha o variante que aparece cuando una entidad se subdivide. Un producto con variantes (color, talla, modelo), una categoría con sub-categorías, una ficha de servicio con paquetes. No todos los sitios lo necesitan —este parte mayormente en L3—, pero un catálogo grande sí: es la hoja del árbol, donde se cierra la conversión.
Hereda el molde del L3 pero con foco en la decisión final: galería ampliada, especificaciones y un CTA fuerte (no exploratorio). Lleva migas de tres niveles (Inicio › Sección › Categoría › Item). La regla: solo se baja a L4 cuando hay suficiente contenido que diferencie las hojas —si no, dos clics para llegar a lo mismo solo añaden fricción—.
- El más profundo: variante o sub-ficha de una entidad L3
- Solo cuando hace falta: catálogos grandes, no sitios simples
- Migas de tres niveles: Inicio › Sección › Categoría › Item
- Foco en la conversión final: galería, specs, CTA fuerte
Responsive y móvil
Los niveles, en el teléfono
La rejilla de niveles no «se encoge»: se reordena. Y las migas de pan, que crecen con la profundidad, se colapsan en móvil para no desbordar. De cuatro por fila a una columna, con cards que se tocan cómodo.
La misma vitrina del catálogo (.showcase) está pensada mobile-first: nace en una columna y va sumando columnas conforme hay ancho —2 en tablet, 4 en escritorio—. Nunca al revés: así el caso base (el teléfono) es el más simple y robusto, y el escritorio solo añade.
El detalle propio de esta serie son las migas de pan: cuanto más profundo el nivel, más larga la ruta (L4 lleva tres saltos). En móvil eso desborda, así que se colapsan dejando solo el ancestro inmediato y la página actual. Cada patrón, abajo, con su vista en el teléfono y su receta.
E
1 · De cuatro por fila a una columna
La vitrina es mobile-first: declara una columna y crece con min-width (2 en tablet, 4 en escritorio). Es el mismo .showcase del catálogo —no se duplica diseño— y baja a una columna sin tocar la card.
/* La vitrina de niveles es mobile-first: 1 → 2 → 4 por fila.
Arranca en UNA columna y CRECE con min-width (nunca al revés). */
.showcase { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px) { .showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .showcase { grid-template-columns: repeat(4, 1fr); } }E
…ProductosCasco
2 · Migas que se colapsan con la profundidad
Una ficha L4 lleva tres saltos (Inicio › Sección › Categoría › Item): en una pantalla angosta eso desborda. La regla: en móvil deja visible solo el ancestro inmediato y la página actual, el resto se pliega en un «…». El visitante conserva el «volver» sin perder espacio.
/* Las migas de pan reflejan el nivel: cuanto más profundo, más larga la ruta.
En móvil se colapsan para no desbordar (solo el último salto + «volver»). */
.crumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: var(--text-xs); }
@media (max-width: 560px) {
/* deja visible solo el ancestro inmediato + la página actual */
.crumbs > :not(:nth-last-child(-n+2)) { display: none; }
}E
RaízPresentaReparte Ver nivel44px
3 · Cards cómodas de tocar
En el teléfono se toca con el dedo, no con un cursor: los chips de cada nivel y el botón «Ver nivel» crecen al área táctil de 44 px, y todo elemento tocable lleva un realce de toque suave para confirmar el tap.
/* mobile.css · la card de nivel se toca cómodo en el teléfono. */
@media (max-width: 1024px) {
a, button, [role="button"], label {
-webkit-tap-highlight-color: rgba(91, 61, 245, .15); /* feedback al tap */
}
}
@media (max-width: 768px) {
.ccard__sub { min-height: 40px; display: inline-flex; align-items: center; }
}Preguntas frecuentes sobre los niveles
¿Cuántos niveles tiene un sitio en este sistema?
Cuatro: L1 (la home), L2 (índice de sección como /productos o /servicios), L3 (ficha de una entidad a fondo como un producto o módulo) y L4 (sub-ficha o variante cuando una entidad se subdivide). No todos los sitios necesitan L4; muchos van bien hasta L3.
¿Cómo sé en qué nivel está una página?
Cuenta los saltos desde la raíz. La home es L1 (0 saltos). /productos es L2 (1 salto). /productos/equipo-base es L3 (2 saltos). /productos/equipo-base/variante-roja sería L4 (3 saltos). Las migas de pan lo reflejan: cuantos más segmentos tiene la ruta, más profundo el nivel.
¿Es obligatorio usar los 4 niveles?
No. El sistema te da el molde de los 4; tú usas los que tu sitio necesita. Un sitio de servicios simples puede funcionar con L1+L2+L3 (home + servicios + detalle de servicio) sin ningún L4. L4 se justifica cuando una entidad tiene variantes reales que merecen su propia URL: colores, tallas, modelos, paquetes.
¿Por qué las migas de pan cambian con el nivel?
Las migas de pan (Breadcrumbs) reflejan la profundidad en la jerarquía: L1 no tiene (es el origen), L2 muestra solo «Inicio › Sección», L3 agrega el nombre de la sección y L4 agrega el nombre de la categoría padre. El componente Breadcrumbs recibe el prop breadcrumbs del PageLayout y lo construye automáticamente desde los datos de cada página.
¿Puede una página del sitio cambiar de nivel?
En la práctica, no: el nivel se fija al diseñar la arquitectura del sitio. Lo que sí puede pasar es que un sitio que empezó con L3 como hoja terminal decida agregar variantes y convertir esa L3 en padre de un nuevo L4. Ese cambio implica crear las nuevas páginas L4, ajustar las migas y posiblemente hacer redirects de las URLs anteriores.