/* Continental Media — "/proyectos" INDEX PAGE block styles. Namespaced under .cm-pindex. Depends on assets/css/tokens.css. Deliberately NOT projects-teaser's solid-color-block grid — that block's whole thesis is "no client photography, the proof is the work itself" (see projects-teaser.css's own header). This page is the opposite move on purpose: now that 9 real case studies exist with real hero photography, the index becomes an editorial numbered list (structurally the same full-width divided-row pattern pillar-page.css already established for /servicios — index | name | one-line body, continuous thin rules, one row addressed at a time) adapted for a photo thumbnail that expands on hover instead of pillar-page's full-bleed accent-fill. ---------- Row hover mechanic ---------- At rest: a small (fixed aspect-ratio box) thumbnail sits at the row's right edge. On hover/focus-within: the thumbnail image scales up via `transform: scale()` (never width/height — the brief's own explicit "prioriza animar transform y opacity" perf note, and transform is what lets the box's own layout footprint stay untouched while the image visually spills over neighboring rows) with `transform-origin: right center` so it grows toward the row's own content instead of off-page; the row's description (always in the DOM, always taking up its own reserved line-height so no row's resting height ever depends on hover state) fades/rises in; the client name recolors to the accent. Getting the enlarged image to visually overlap neighbouring rows at all requires every ancestor up to .cm-pindex-list to allow overflow — a single `overflow: hidden` anywhere in that chain would clip the effect, so none of them set it. ---------- Sibling dimming ---------- "Other rows dim to 75-85% opacity while one is hovered" needs knowledge of ALL rows at once, which a single row's own :hover cannot express on its own — implemented in projects-index.js (mouseenter/focusin toggles .is-row-active on the list + .is-hovered on the target row), not CSS :has() — matching this site's established convention of JS-driven interaction state classes (pillar-page's .is-active is the same shape) over relying on very recent selector support for a purely cosmetic effect. The row's OWN local hover effects (thumbnail scale, description reveal, name color) stay pure CSS :hover/:focus-within regardless, so they still work even if JS never loads. ---------- Filter chips ---------- Exactly one chip active at a time (a single-select, not independent toggles) — real