/* ============================================================ ÍNDICE DE OBRA — solo lo propio de esta página. Hereda la paleta, la tipografía y las utilidades de ../assets/d.css y reutiliza la cabecera fija de obra.css (.ob-bar). No redefine ni un color ni una fuente: un segundo :root es la vía rápida a que dos páginas del mismo sitio dejen de parecerse. ============================================================ */ /* El max-width vive en el PÁRRAFO, no en la sección: con él arriba, el titular se estrangulaba a 74ch y cada línea partía en dos. El texto de lectura sí quiere medida corta; el titular quiere todo el ancho. */ .ix-head{ padding:clamp(96px,13vh,150px) var(--gut) clamp(28px,4vh,44px); } .ix-head .p{ max-width:74ch } /* --- una línea de servicio --- */ .ix-line{ padding:0 var(--gut) clamp(34px,5vh,58px) } .ix-line-head{ display:flex; align-items:baseline; gap:clamp(10px,1.6vw,20px); flex-wrap:wrap; padding:clamp(16px,2.4vh,26px) 0 clamp(14px,2vh,22px); border-top:1px solid color-mix(in oklab, var(--ink) 18%, transparent); } .ix-code{ color:var(--acc) } .ix-name{ margin:0 } .ix-meta{ margin:0; color:var(--ink-2); margin-left:auto; text-align:right } .ix-rows{ display:grid; gap:2px } /* Una fila es una plancha + su ficha. En móvil se apila; en cuanto hay ancho, la plancha va a la izquierda con ancho fijo para que todas las fichas arranquen en la misma vertical: una lista se lee por su columna de texto. */ .ix-row{ position:relative; display:grid; gap:clamp(12px,2vw,26px); transition:background .24s var(--ease-s), border-color .24s var(--ease-s); background:color-mix(in oklab, var(--deep) 86%, transparent); padding:clamp(12px,1.6vw,18px); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent); } @media (min-width:760px){ /* La columna del plano es FIJA y el plano se centra dentro. Con la columna a `auto` cada fila arrancaba su texto en una vertical distinta según la forma de la pieza, y una lista se lee por su columna de texto: quedaba dentada. */ .ix-row{ grid-template-columns:240px minmax(0,1fr); align-items:start } } /* CAJA UNIFORME 4:5, y las caras se salvan con el punto focal calculado, no con la forma de la caja. Se probó dejar que cada miniatura tomara su proporción real y se veía peor: un 16:9 quedaba como una tira apaisada diminuta al lado de un 9:16 alto, y la lista perdía el ritmo. Con caja uniforme la página se lee, y lo que evita el recorte de cabezas es `focalY()` en indice.js, que limita cuánto se puede comer por arriba (ver el porqué allí). Los apaisados son la excepción: entran en `contain` en vez de `cover`, porque un 16:9 recortado a 4:5 pierde el 55 % del ancho y en Glass Bottle eso se come la tipografía, que ES la pieza (MARCA.md §11.2). */ .ix-shot{ position:relative; margin:0; overflow:hidden; background:var(--deep); width:100%; aspect-ratio:4/5; } .ix-shot[data-land="1"] img, .ix-shot[data-land="1"] video{ object-fit:cover } /* `contain` dejaba el apaisado como una tira en medio de dos bandas vacías y la etiqueta flotando en el hueco: uniforme pero pobre. Se recorta centrado, que en estas tres piezas —lata, frasco, cartel— deja el sujeto entero. La excepción va por dato: `fit: 'contain'` en works.js para la pieza cuyo contenido llega a los bordes, no por nombre en el CSS. */ .ix-shot[data-fit="contain"] img, .ix-shot[data-fit="contain"] video{ object-fit:contain } @media (max-width:759px){ .ix-shot{ width:min(100%, 300px); justify-self:center } } .ix-shot img, .ix-shot video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ix-shot video{ z-index:2; background:#000 } /* LA CAJA ENTERA ES EL BOTÓN. Antes había un play de 44 px abajo a la izquierda y el vídeo se reproducía dentro de la miniatura de 290 px: para un estudio audiovisual, lo contrario de enseñar. Ahora el