# TASK-040-full-width-page-shell-and-section-width-rebalance

## Goal
Reorganizar el layout general de la landing para aprovechar mucho mejor el ancho de página disponible, separando el ancho útil de las distintas secciones y eliminando la sensación de página excesivamente estrecha.

## Context
La UI actual ya funciona y muestra datos reales, pero la composición general está demasiado constreñida en ancho. Esto provoca mucho espacio muerto lateral, reduce el impacto visual del diseño y comprime en exceso el panel de servidores. La landing necesita una estructura de anchuras más flexible y más coherente con un formato panorámico de desktop.

## Steps
1. Revisar la estructura general de contenedores de `frontend/index.html`.
2. Revisar el sistema de anchuras, `max-width`, paddings laterales y shells actuales en `frontend/assets/css/styles.css`.
3. Reorganizar la página para que no todas las secciones dependan del mismo ancho máximo.
4. Definir al menos una separación clara entre:
   - ancho del hero
   - ancho del tráiler
   - ancho del panel de servidores
5. Aumentar el ancho útil del bloque de servidores para aprovechar mejor desktop amplio.
6. Mantener el diseño responsive y sin romper móvil o tablet.
7. Preservar la identidad visual actual sin rediseñar completamente la página.

## Files to Read First
- AGENTS.md
- ai/repo-context.md
- frontend/index.html
- frontend/assets/css/styles.css
- frontend/assets/js/main.js

## Expected Files to Modify
- frontend/index.html
- frontend/assets/css/styles.css

## Constraints
- No tocar backend.
- No añadir librerías nuevas.
- No romper el comportamiento actual del frontend.
- No hacer cambios destructivos.
- Mantener la landing coherente con el tono visual actual.

## Validation
- La página ocupa mejor el ancho disponible en desktop.
- El panel de servidores gana anchura real.
- El hero y el tráiler mantienen buen equilibrio visual.
- La UI sigue funcionando correctamente en tablet y móvil.

## Change Budget
- Preferir menos de 3 archivos modificados.
- Preferir menos de 180 líneas cambiadas.

## Outcome
- `frontend/assets/css/styles.css` separa el ancho del hero, del bloque de trailer y del panel de servidores con shells independientes.
- El `page-shell` deja de imponer un unico ancho maximo a toda la landing y el panel de servidores gana mas ancho util en desktop.
- La mejora se mantuvo en CSS para no introducir cambios estructurales innecesarios en el HTML.

## Validation Result
- Revisado en diff: el ajuste queda limitado a `frontend/assets/css/styles.css` y al propio archivo de task.
- Revisado en codigo: hero, trailer y panel de servidores usan anchuras maximas distintas y el layout movil conserva los resets responsive existentes.
- Limitacion: no se ejecuto una comprobacion visual automatizada del navegador en esta tarea.

## Decision Notes
- La separacion de shells se resolvio con anchuras por seccion en lugar de crear nuevos wrappers HTML, para mantener la landing estable y reducir riesgo sobre el frontend actual.