/* ===================================================================== galeria.css — las dos galerías, una sola hoja Galeria-Medieval.html y Galeria-Metalco.html tenían 1.000 líneas de CSS en línea cada una y compartían 48 de sus 52 selectores. De lo que difería, el 81 % era color: el mismo `.gallery-item` con el borde en oro o en azul, el mismo overlay con el degradado en marrón o en marino. Duplicar mil líneas para cambiar cuatro tonos es lo que hacía que una corrección se arreglara en una página y siguiera rota en la otra —el lightbox colapsado y el `padStart` sobre el identificador estaban en las dos, palabra por palabra—. Aquí la estructura está una vez. Lo que cambia de una marca a otra sale de los tokens de sistema.css: cada página declara `data-marca` en y hereda su luz. Lo único que esta hoja añade por marca son las dos decisiones que no son color y están al principio del archivo. Depende de sistema.css (tokens, `.m-corte`, `.m-boton`) y de catalogo.css (`.filtros`, `.filtro`, `.estado`, `.rejilla`). Orden de carga: fuentes → sistema → catalogo → galeria. ===================================================================== */ /* ===================================================================== Lo que de verdad separa a las dos marcas La proporción de la tarjeta. La forja fotografía piezas verticales —espadas, armaduras, yelmos sobre un fondo—; el taller CNC fotografía estructuras, mesas de corte y planchas, que son horizontales. Recortar ambas al mismo rectángulo dejaba media espada fuera o media plancha con aire negro. ===================================================================== */ /* La forja iba a 4/5 —vertical— porque se supuso que sus piezas son espadas de pie. Las 33 fotografías que hay de verdad en la galería dicen otra cosa: las piezas están tumbadas sobre la mesa del taller y su proporción va de 0,75 a 1,37, con la mediana en 1,01. Recortar todo eso a 0,8 se comía las puntas de las hojas y los cantos de las bandejas de yelmos. Un cuadrado está en el centro de esa distribución y recorta poco en las dos direcciones; lo que sobre lo coloca el punto focal. */ [data-marca='medieval'] { --pieza-proporcion: 1 / 1; --pieza-titular-peso: 700; } [data-marca='cnc'] { --pieza-proporcion: 4 / 3; /* Inter aguanta menos peso que Cinzel al tamaño de una tarjeta: a 700 el titular industrial se emborrona sobre la fotografía. */ --pieza-titular-peso: 600; } /* El espaciado del titular lo decide sistema.css con --m-titular-ajuste: la marca industrial titula en Inter y quiere el tracking cerrado; la medieval titula en Cinzel y quiere el contrario. Aquí solo se consume. */ /* ===================================================================== Base de página ===================================================================== */ body { margin: 0; background: var(--m-negro-1); color: var(--m-texto); font-family: var(--m-cuerpo); font-size: var(--m-txt-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Ancla de salto para el teclado: primera parada del tabulador. */ .saltar { position: absolute; left: var(--m-esp-sm); top: -4rem; z-index: var(--m-capa-modal); padding: var(--m-esp-2xs) var(--m-esp-sm); background: var(--m-negro-3); color: var(--m-acento-claro); border: 1px solid var(--m-acento); border-radius: var(--m-radio-sm); text-decoration: none; transition: top var(--m-rapido) var(--m-salida); } .saltar:focus { top: var(--m-esp-sm); } /* ===================================================================== Cabecera La altura es fija (3,4 rem) porque la barra de filtros de catalogo.css se pega justo debajo, en `top: 3.4rem`. Si la cabecera creciera con el logo, entre las dos quedaría una franja por la que se vería pasar el contenido. ===================================================================== */ .cabecera { position: sticky; top: 0; z-index: var(--m-capa-cabecera); display: flex; align-items: center; gap: var(--m-esp-sm); min-height: 3.4rem; padding: var(--m-esp-3xs) var(--m-canal); background: color-mix(in srgb, var(--m-negro-0) 88%, transparent); backdrop-filter: blur(14px); border-block-end: 1px solid color-mix(in srgb, var(--m-acento) 20%, transparent); } .cabecera__marca { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; } /* El logo es una imagen ancha: se fija el alto y el ancho lo calcula el navegador con la proporción de los atributos. */ .cabecera__logo { height: clamp(1.6rem, 4.5vw, 2.2rem); width: auto; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--m-acento) 25%, transparent)); } .cabecera__volver { display: inline-flex; align-items: center; min-height: 2.75rem; margin-inline-start: auto; padding-inline: var(--m-esp-2xs); font-size: var(--m-txt-sm); color: var(--m-humo); text-decoration: none; white-space: nowrap; } .cabecera__volver:hover { color: var(--m-acento-claro); } /* En 390 px la cabecera son tres elementos peleando por 350 px de ancho útil. Lo primero que sobra es la mitad de la frase de vuelta. */ @media (max-width: 30rem) { .cabecera__volver-largo { display: none; } } /* ===================================================================== Portada de la página ===================================================================== */ .portada { padding-block: var(--m-esp-xl) var(--m-esp-lg); text-align: center; } .portada__titulo { font-family: var(--m-titular); font-size: var(--m-txt-3xl); font-weight: 900; line-height: 1; letter-spacing: var(--m-titular-ajuste, 0.02em); margin: var(--m-esp-sm) 0 0; color: var(--m-texto); text-wrap: balance; } .portada__entrada { margin: var(--m-esp-sm) auto 0; max-width: 58ch; color: var(--m-humo); font-size: var(--m-txt-md); text-wrap: pretty; } .portada__corte { margin-block-start: var(--m-esp-lg); } /* Cifras de la galería. Nacen ocultas y las descubre el JS cuando sabe cuántos trabajos hay de verdad: una cifra escrita a mano en el HTML se queda mintiendo en cuanto el taller sube una foto más. */ .cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--m-esp-xs) var(--m-esp-lg); margin-block-start: var(--m-esp-md); padding: 0; list-style: none; } .cifras[hidden] { display: none; } .cifras li { display: flex; flex-direction: column; align-items: center; gap: 2px; } .cifras b { font-family: var(--m-titular); font-size: var(--m-txt-lg); font-weight: 700; color: var(--m-acento-claro); font-variant-numeric: tabular-nums; line-height: 1; } .cifras span { font-size: var(--m-txt-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-humo-tenue); } /* ===================================================================== Filtros Casi todo viene de catalogo.css. Aquí solo se añade lo que aquella hoja no puede saber: un filtro cuya sección no tiene ni una foto se esconde. `.filtro` declara display: inline-flex, que gana al display: none del atributo hidden de la hoja del navegador, así que hay que decirlo. ===================================================================== */ .filtro[hidden] { display: none; } /* Y si no hay ni una foto, tampoco hay nada que filtrar. */ .filtros[hidden] { display: none; } /* ===================================================================== El mosaico Es la `.rejilla` de catalogo.css con dos ajustes. `--col` da 2 columnas en 390 px, 3 en 768 y 4 en 1440 sin una sola media query. Y `--n` —el número de trabajos visibles, que pone el JS— limita el ancho del mosaico a las columnas que de verdad se van a llenar: con una foto sola, la rejilla no la deja arrinconada a la izquierda de un espacio vacío de 1.300 px. ===================================================================== */ .mosaico { --col: clamp(10rem, 26vw, 17rem); --col-tope: 17rem; max-width: calc(var(--n, 99) * (var(--col-tope) + var(--m-esp-md))); margin-inline: auto; } /* Con uno o dos trabajos la columna estrecha se ve a maqueta sin terminar. Menos piezas, más grandes: es la misma decisión que toma una sala de exposición cuando cuelga tres cuadros en vez de treinta. */ .mosaico[data-pocas] { --col: clamp(14rem, 60vw, 26rem); --col-tope: 26rem; } /* ===================================================================== La pieza Es un