# responsive-layout Specification

## Requirements

### Requirement: Wide desktop container

The public layout MUST use the available desktop width. The shared container MUST cap at `1600px`
(`100rem`) with responsive horizontal padding (`px-5 sm:px-8 lg:px-12 xl:px-16`), and content grids
MUST widen on large screens (catalog and product grids to four columns on `xl`). Narrow max-widths
MUST be reserved for prose/measure text.

#### Scenario: Container uses the wide max-width

- GIVEN a public page rendered on a large desktop viewport
- WHEN its container renders
- THEN it uses the `max-w-[1600px]` cap with responsive padding
- AND no fixed-width element is wider than the container

### Requirement: Fluid typography and spacing

The system MUST apply fluid `clamp()` typography and spacing tokens across public pages so type and
rhythm scale continuously between mobile and desktop without breakpoint jumps.

#### Scenario: Type scales fluidly between breakpoints

- GIVEN a public page rendered at mobile and desktop widths
- WHEN the hero, h1, and h2 type is measured
- THEN each scales fluidly via `clamp()` between its mobile and desktop values

#### Scenario: Spacing uses a fluid scale

- GIVEN section padding and vertical rhythm on a public page
- WHEN the viewport width changes
- THEN spacing scales fluidly through the shared spacing tokens

### Requirement: Responsive audit across pages

The home, catalog, product detail, B2B (`/empresas`), projects, blog, and contact pages MUST render
without horizontal overflow at mobile, tablet, and desktop widths.

#### Scenario: No horizontal overflow on any audited page

- GIVEN each audited page (home, catalog, product detail, `/empresas`, projects, blog, contact)
- WHEN rendered at mobile, tablet, and desktop widths
- THEN no page produces horizontal scrolling or content wider than the viewport

### Requirement: Tap targets and interaction sizing

Interactive controls MUST have a minimum tap target of `44x44` CSS pixels on touch viewports.

#### Scenario: Tap targets meet the minimum size

- GIVEN a touch viewport
- WHEN buttons, links, and form controls are measured
- THEN each interactive tap target is at least `44x44` CSS pixels

### Requirement: Responsive images

Content images MUST be responsive using `srcset`/`sizes` with explicit dimensions and appropriate
loading behavior.

#### Scenario: Content images are responsive

- GIVEN a page containing content images
- WHEN it renders
- THEN each image includes `srcset`/`sizes` and explicit width/height

#### Scenario: Hero is prioritized, below-fold images are lazy

- GIVEN a page with a hero image and below-fold images
- WHEN it renders
- THEN the hero image is not lazy-loaded
- AND below-fold images use `loading="lazy"`