/* ================================================================= Catálogo público de la Colección Zeus ----------------------------------------------------------------- Referencia visual: la vitrina de una casa de remates. Paneles de terciopelo azul noche, bandejas de peltre donde se apoyan las piezas, rótulos grabados en capitales romanas y los datos de catálogo tipeados en monoespaciada. Dos elementos sostienen el diseño: EL CUÑO Toda pieza se dibuja como una sola moneda acuñada: el anverso al frente y el reverso al dorso del mismo cuño. Al apuntarla, la pieza gira sobre su eje y muestra la otra cara. La forma —disco o lámina— dice el tipo de pieza sin necesidad de leerlo. EL CANTO Los cortes entre secciones no son una línea: son el cordoncillo del canto de una moneda, la serie de muescas que lleva grabada en el borde. ================================================================= */ /* ----------------------------------------------------------------- 1. Fichas de color, tipografía y medidas ----------------------------------------------------------------- */ :root { /* Terciopelo de la vitrina */ --terciopelo: #141C2E; --terciopelo-hondo: #0B1120; --terciopelo-claro: #22304C; /* Bandeja de peltre */ --bandeja: #E6E8E4; --bandeja-honda: #DADDD7; --plato: #F5F5F1; --filo: #CDD1CB; --filo-suave: #DFE2DC; /* Tinta */ --tinta: #161C22; --grafito: #566270; --grafito-claro: #7C8794; --tinta-clara: #E8EAEE; --tinta-clara-tenue: #96A1B4; /* Oro de los rótulos */ --oro: #8A6A22; --oro-vivo: #D6B771; --oro-suave: #F1E9D6; /* Tipografías */ --letra-titulo: 'Marcellus', 'Optima', 'Palatino Linotype', Palatino, serif; --letra-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --letra-dato: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Medidas */ --marco: 78rem; --aire: clamp(1.25rem, 4vw, 3rem); --radio: 0.25rem; --sombra-pieza: 0 1px 1px rgba(22, 28, 34, 0.10), 0 10px 22px -8px rgba(22, 28, 34, 0.22); --sombra-alzada: 0 4px 6px rgba(22, 28, 34, 0.12), 0 22px 42px -12px rgba(22, 28, 34, 0.32); --paso: 200ms cubic-bezier(0.4, 0, 0.2, 1); --giro: 720ms cubic-bezier(0.2, 0.65, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background-color: var(--bandeja); color: var(--tinta); font-family: var(--letra-texto); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; } .oculto-visualmente { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .salto-contenido { position: absolute; top: -3rem; left: 1rem; z-index: 60; padding: 0.5rem 1rem; background-color: var(--terciopelo); color: var(--tinta-clara); font-size: 0.875rem; transition: top var(--paso); } .salto-contenido:focus { top: 1rem; } /* ----------------------------------------------------------------- 2. Pantalla "Cargando.." ----------------------------------------------------------------- */ /* La tapa sólo existe cuando hay JavaScript para retirarla: inicio.js marca apenas arranca. Sin JavaScript no aparece nunca, así el catálogo no queda tapado para siempre. */ .cargando { display: none; } .esta-cargando .cargando { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; justify-content: center; background-color: var(--terciopelo); color: var(--tinta-clara); transition: opacity 260ms ease, visibility 260ms ease; } .esta-cargando:not(.esta-lista) body { overflow: hidden; } .cargando__cuno { width: 2.75rem; height: 2.75rem; border: 2px solid rgba(214, 183, 113, 0.28); border-top-color: var(--oro-vivo); border-radius: 50%; animation: cuno-gira 900ms linear infinite; } .cargando__texto { font-family: var(--letra-dato); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-clara-tenue); } @keyframes cuno-gira { to { transform: rotate(360deg); } } /* Al terminar de cargar se agrega "esta-lista" sin quitar "esta-cargando": la tapa conserva sus estilos y puede desvanecerse en lugar de desaparecer de golpe. */ .esta-cargando.esta-lista .cargando { opacity: 0; visibility: hidden; } /* ----------------------------------------------------------------- 3. El canto: el cordoncillo del borde de una moneda ----------------------------------------------------------------- */ .canto { display: block; height: 0.4375rem; background-image: repeating-linear-gradient( 90deg, rgba(214, 183, 113, 0.55) 0 1px, transparent 1px 0.375rem ); } .canto--tinta { background-image: repeating-linear-gradient( 90deg, rgba(86, 98, 112, 0.5) 0 1px, transparent 1px 0.375rem ); } /* ----------------------------------------------------------------- 4. Cabecera, navegación y buscador breve ----------------------------------------------------------------- */ .cabecera { position: sticky; top: 0; z-index: 50; background-color: var(--terciopelo); color: var(--tinta-clara); } .cabecera__marco { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; max-width: var(--marco); margin: 0 auto; padding: 0.875rem var(--aire); } .marca { display: flex; gap: 0.75rem; align-items: center; } .marca__cuno { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border: 1px solid rgba(214, 183, 113, 0.6); border-radius: 50%; background-image: radial-gradient(circle at 32% 26%, #3A4A6B, #16203A 72%); box-shadow: inset 0 0 0 3px rgba(214, 183, 113, 0.16); color: var(--oro-vivo); font-family: var(--letra-titulo); font-size: 1.125rem; line-height: 1; text-indent: 0.04em; } .marca__texto { display: flex; flex-direction: column; } .marca__nombre { font-family: var(--letra-titulo); font-size: 1.1875rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } .marca__bajada { font-family: var(--letra-dato); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-clara-tenue); } .navegacion__interruptor, .cabecera__abrir { display: none; } .navegacion { display: flex; gap: 0.375rem; align-items: center; } .navegacion__enlace { position: relative; padding: 0.5rem 0.75rem; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-clara-tenue); transition: color var(--paso); } .navegacion__enlace::after { content: ''; position: absolute; right: 0.75rem; bottom: 0.25rem; left: 0.75rem; height: 1px; background-color: var(--oro-vivo); transform: scaleX(0); transform-origin: left; transition: transform var(--paso); } .navegacion__enlace:hover, .navegacion__enlace--activo { color: var(--tinta-clara); } .navegacion__enlace:hover::after, .navegacion__enlace--activo::after { transform: scaleX(1); } .buscador-breve { display: flex; align-items: center; margin-left: 0.5rem; border: 1px solid rgba(232, 234, 238, 0.18); border-radius: 999px; background-color: rgba(11, 17, 32, 0.6); transition: border-color var(--paso); } .buscador-breve:focus-within { border-color: rgba(214, 183, 113, 0.7); } .buscador-breve__campo { width: 9.5rem; padding: 0.4375rem 0 0.4375rem 0.875rem; border: 0; background: none; color: var(--tinta-clara); font: inherit; font-size: 0.8125rem; } .buscador-breve__campo::placeholder { color: rgba(150, 161, 180, 0.85); } .buscador-breve__campo:focus { outline: none; } .buscador-breve__lupa { padding: 0.4375rem 0.75rem 0.4375rem 0.5rem; border: 0; background: none; color: var(--oro-vivo); font-size: 1.125rem; line-height: 1; cursor: pointer; } /* ----------------------------------------------------------------- 5. Lienzo, secciones y rótulos ----------------------------------------------------------------- */ .lienzo { display: block; min-height: 60vh; } .marco { max-width: var(--marco); margin: 0 auto; padding: 0 var(--aire); } .seccion { padding: clamp(2.75rem, 6vw, 4.5rem) 0; } .seccion--ceñida { padding-top: clamp(1.5rem, 3vw, 2.25rem); } .seccion__encabezado { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.75rem; } .rubro { display: block; margin-bottom: 0.625rem; font-family: var(--letra-dato); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro); } .rubro--claro { color: var(--oro-vivo); } .titular { font-family: var(--letra-titulo); font-size: clamp(1.5rem, 3.2vw, 2.125rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.15; } .titular--mayor { font-size: clamp(2.125rem, 6.5vw, 3.75rem); letter-spacing: 0.02em; } .titular--menor { font-size: clamp(1.25rem, 2.4vw, 1.5rem); } .entrada { max-width: 46ch; color: var(--grafito); } .entrada--clara { color: var(--tinta-clara-tenue); } .dato { font-family: var(--letra-dato); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* ----------------------------------------------------------------- 6. Botones y enlaces de sección ----------------------------------------------------------------- */ .boton { display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; padding: 0.6875rem 1.375rem; border: 1px solid var(--terciopelo); border-radius: 999px; background-color: var(--terciopelo); color: var(--tinta-clara); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color var(--paso), color var(--paso), border-color var(--paso); } .boton:hover { background-color: var(--terciopelo-claro); border-color: var(--terciopelo-claro); } .boton--perfil { background-color: transparent; color: var(--tinta); } .boton--perfil:hover { background-color: var(--terciopelo); color: var(--tinta-clara); } .boton--oro { border-color: var(--oro-vivo); background-color: var(--oro-vivo); color: var(--terciopelo-hondo); } .boton--oro:hover { border-color: var(--oro-suave); background-color: var(--oro-suave); color: var(--terciopelo-hondo); } .boton--sobrio { padding: 0.4375rem 0.9375rem; border-color: var(--filo); background-color: transparent; color: var(--grafito); font-size: 0.75rem; } .boton--sobrio:hover { border-color: var(--grafito); background-color: transparent; color: var(--tinta); } /* Enlace "ver todo" de cada sección: la flecha se desplaza al apuntarlo. */ .enlace-mas { display: inline-flex; gap: 0.5rem; align-items: center; padding-bottom: 0.1875rem; border-bottom: 1px solid var(--filo); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oro); transition: border-color var(--paso), color var(--paso); } .enlace-mas:hover { border-color: var(--oro); color: var(--tinta); } .enlace-mas__flecha { transition: transform var(--paso); } .enlace-mas:hover .enlace-mas__flecha { transform: translateX(0.25rem); } .enlace-mas--claro { border-color: rgba(214, 183, 113, 0.4); color: var(--oro-vivo); } .enlace-mas--claro:hover { border-color: var(--oro-vivo); color: var(--tinta-clara); } /* ----------------------------------------------------------------- 7. El cuño: la pieza acuñada que gira sobre su eje ----------------------------------------------------------------- */ .cuno { display: block; perspective: 900px; } .cuno__giro { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background-color: var(--plato); transform-style: preserve-3d; transition: transform var(--giro); } .cuno__cara { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; } .cuno__cara--reverso { transform: rotateY(180deg); } .cuno__cara--ausente { display: block; background-color: var(--bandeja-honda); background-image: repeating-linear-gradient( 135deg, rgba(86, 98, 112, 0.12) 0 1px, transparent 1px 0.5rem ); } /* Tres medidas: la de la lista, la de las grillas y la de la bandeja de la portada. La de la grilla ocupa la columna entera. */ .cuno--menudo { width: 2.5rem; } /* Un disco: monedas, medallas y fichas. La foto se recorta en círculo, así la pieza queda con su forma real y no encerrada en un cuadrado. */ .cuno--disco .cuno__giro, .cuno--disco .cuno__cara { border-radius: 50%; } .cuno--disco .cuno__giro { box-shadow: var(--sombra-pieza); } .cuno--disco .cuno__cara { box-shadow: inset 0 0 0 1px rgba(22, 28, 34, 0.14); } /* Una lámina: billetes y sets. El recuadro ya tiene la proporción de la foto —la fija la forma de la pieza en la grilla—, así que la imagen lo llena exacto: no se recorta ni se estira. */ .cuno--lamina .cuno__giro, .cuno--lamina .cuno__cara { border-radius: var(--radio); } .cuno--lamina .cuno__giro { box-shadow: var(--sombra-pieza); } .cuno--lamina .cuno__cara { box-shadow: inset 0 0 0 1px rgba(22, 28, 34, 0.12); } /* ----------------------------------------------------------------- 8. Ficha de pieza y grillas ----------------------------------------------------------------- */ .pieza { position: relative; } .pieza__enlace { display: block; } .pieza__enlace:hover .cuno__giro, .pieza__enlace:focus-visible .cuno__giro { transform: rotateY(180deg); } .pieza__enlace:hover .cuno, .pieza__enlace:focus-visible .cuno { transform: translateY(-0.3125rem); } .pieza__enlace .cuno { transition: transform var(--paso); } .pieza__rotulo { display: block; margin-top: 0.875rem; text-align: center; } .pieza__denominacion { display: block; font-family: var(--letra-titulo); font-size: 1rem; line-height: 1.3; transition: color var(--paso); } .pieza__enlace:hover .pieza__denominacion { color: var(--oro); } .pieza__linea { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.3125rem; } .pieza__anio { font-family: var(--letra-dato); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grafito); } .pieza__pais { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grafito-claro); } .pieza__sello { position: absolute; top: 0; right: 0; padding: 0.1875rem 0.5rem; border: 1px solid rgba(138, 106, 34, 0.35); border-radius: 999px; background-color: var(--oro-suave); color: var(--oro); font-family: var(--letra-dato); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; } /* La grilla envuelve piezas de ancho fijo según la proporción de su foto: una moneda cuadrada ocupa tanto ancho como alto; un billete vertical, menos de la mitad. Ninguna pieza crece para llenar la fila —así todas las piezas de una misma forma miden siempre igual, esté la fila completa o no— y las filas se centran para que el sobrante de una fila incompleta quede repartido a los dos lados en vez de amontonado a la derecha. */ .grilla { --alto-fila: 9.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem); align-items: flex-start; } .grilla--holgada { --alto-fila: 11.5rem; } /* Tira de la portada: una sola fila siempre, sin la segunda fila incompleta que dejaría un renglón suelto. Lo que no entra se desliza al costado en vez de bajar de línea, arrastrando con el dedo o el mouse; la barra de scroll se oculta a propósito para no romper la vitrina. */ .grilla--fila { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .grilla--fila::-webkit-scrollbar { display: none; } .grilla--fila-arrastrando { cursor: grabbing; user-select: none; } .grilla--fila .pieza { flex-shrink: 0; } .pieza { min-width: 0; } .pieza--muy-alta { flex: 0 1 calc(var(--alto-fila) * 0.45); } .pieza--alta { flex: 0 1 calc(var(--alto-fila) * 0.667); } .pieza--cuadrada { flex: 0 1 var(--alto-fila); } .pieza--ancha { flex: 0 1 calc(var(--alto-fila) * 1.5); } .pieza--muy-ancha { flex: 0 1 calc(var(--alto-fila) * 2.222); } .pieza--muy-alta .cuno__giro { aspect-ratio: 9 / 20; } .pieza--alta .cuno__giro { aspect-ratio: 2 / 3; } .pieza--cuadrada .cuno__giro { aspect-ratio: 1 / 1; } .pieza--ancha .cuno__giro { aspect-ratio: 3 / 2; } .pieza--muy-ancha .cuno__giro { aspect-ratio: 20 / 9; } /* En una pieza angosta el sello entero no entra: se acorta. */ .pieza--muy-alta .pieza__sello { padding: 0.125rem 0.375rem; font-size: 0.5rem; letter-spacing: 0.08em; } /* ----------------------------------------------------------------- 9. Portada: la bandeja de la vitrina ----------------------------------------------------------------- */ .vitrina { position: relative; overflow: hidden; background-color: var(--terciopelo); background-image: radial-gradient(ellipse 60% 70% at 78% 18%, rgba(64, 84, 124, 0.55), transparent 70%), radial-gradient(ellipse 70% 60% at 10% 90%, rgba(11, 17, 32, 0.85), transparent 65%); color: var(--tinta-clara); } .vitrina__marco { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; max-width: var(--marco); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--aire) clamp(2.5rem, 6vw, 4.5rem); } .vitrina__decir { max-width: 34rem; } .vitrina__titular { margin-bottom: 1.25rem; } .vitrina__legajo { display: flex; flex-wrap: wrap; gap: 0 2.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(232, 234, 238, 0.14); } .legajo__renglon { display: flex; flex-direction: column-reverse; } .legajo__cifra { font-family: var(--letra-dato); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--oro-vivo); } .legajo__rotulo { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-clara-tenue); } /* El mismo legajo, apoyado sobre la bandeja en vez del terciopelo. */ .vitrina__legajo--tinta { margin-top: 0; border-top-color: var(--filo); } .vitrina__legajo--tinta .legajo__cifra { color: var(--tinta); } .vitrina__legajo--tinta .legajo__rotulo { color: var(--grafito); } .vitrina__botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* La bandeja: las piezas destacadas apoyadas en abanico, cada una girada un poco distinto, como quedan al sacarlas del cajón. */ .bandeja { display: flex; justify-content: center; padding: 0.5rem 0; } .bandeja__pieza { position: relative; flex: 0 0 auto; width: clamp(5.5rem, 15vw, 9.5rem); margin-left: -2.25rem; transition: transform var(--paso), z-index 0ms; animation: pieza-se-apoya 700ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards; } .bandeja__pieza:first-child { margin-left: 0; } .bandeja__pieza:nth-child(1) { z-index: 1; transform: rotate(-9deg) translateY(0.75rem); animation-delay: 120ms; } .bandeja__pieza:nth-child(2) { z-index: 2; transform: rotate(-4deg) translateY(-0.25rem); animation-delay: 220ms; } .bandeja__pieza:nth-child(3) { z-index: 3; transform: rotate(1deg) translateY(-1rem); animation-delay: 320ms; } .bandeja__pieza:nth-child(4) { z-index: 2; transform: rotate(6deg) translateY(-0.25rem); animation-delay: 420ms; } .bandeja__pieza:nth-child(5) { z-index: 1; transform: rotate(11deg) translateY(0.75rem); animation-delay: 520ms; } .bandeja__pieza:hover, .bandeja__pieza:focus-within { z-index: 6; transform: translateY(-1.25rem) rotate(0deg) scale(1.06); } .bandeja__pieza .cuno__giro { background-color: var(--terciopelo-claro); box-shadow: 0 3px 6px rgba(6, 10, 20, 0.4), 0 26px 48px -14px rgba(6, 10, 20, 0.75); } .bandeja__pieza .cuno--disco .cuno__cara { box-shadow: inset 0 0 0 1px rgba(214, 183, 113, 0.35); } .bandeja__pieza:hover .cuno__giro, .bandeja__pieza:focus-within .cuno__giro { transform: rotateY(180deg); } .bandeja__nota { margin-top: 1.75rem; text-align: center; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-clara-tenue); } @keyframes pieza-se-apoya { from { opacity: 0; transform: translateY(-2.5rem) rotate(0deg); } } /* Buscador grande de la portada */ .buscador-mayor { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 1.125rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); box-shadow: var(--sombra-pieza); } .buscador-mayor__campo { flex: 1 1 16rem; min-width: 0; padding: 0.75rem 1rem; border: 1px solid var(--filo-suave); border-radius: var(--radio); background-color: #FFF; color: var(--tinta); font: inherit; } .buscador-mayor__campo:focus { border-color: var(--oro); outline: none; } /* ----------------------------------------------------------------- 10. Países emisores ----------------------------------------------------------------- */ .abecedario { position: sticky; top: 4.5rem; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 2.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: rgba(245, 245, 241, 0.94); backdrop-filter: blur(6px); } .abecedario__letra { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; font-family: var(--letra-dato); font-size: 0.8125rem; color: var(--grafito); transition: background-color var(--paso), color var(--paso); } .abecedario__letra:hover { background-color: var(--terciopelo); color: var(--tinta-clara); } .tanda { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .tanda__letra { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; } .tanda__inicial { font-family: var(--letra-titulo); font-size: 1.75rem; line-height: 1; color: var(--oro); } .tanda__raya { flex: 1; height: 0.4375rem; background-image: repeating-linear-gradient( 90deg, rgba(86, 98, 112, 0.4) 0 1px, transparent 1px 0.375rem ); } .paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; } .pais { display: flex; gap: 1rem; align-items: center; padding: 0.875rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); transition: border-color var(--paso), transform var(--paso), box-shadow var(--paso); } .pais:hover { border-color: var(--oro); box-shadow: var(--sombra-pieza); transform: translateY(-2px); } /* Las tres piezas de muestra, apiladas como quedan en la carpeta. */ .pais__muestra { position: relative; flex: 0 0 auto; width: 4.25rem; height: 3.25rem; } .pais__moneda { position: absolute; top: 50%; width: 2.625rem; height: 2.625rem; object-fit: cover; background-color: var(--bandeja-honda); box-shadow: 0 1px 3px rgba(22, 28, 34, 0.28); transform: translateY(-50%); transition: transform var(--paso); } .pais__moneda--disco { border-radius: 50%; } .pais__moneda--lamina { border-radius: 2px; } .pais__moneda:nth-child(1) { left: 0; z-index: 3; } .pais__moneda:nth-child(2) { left: 0.8rem; z-index: 2; } .pais__moneda:nth-child(3) { left: 1.6rem; z-index: 1; } .pais:hover .pais__moneda:nth-child(1) { transform: translate(-0.1875rem, -50%) rotate(-6deg); } .pais:hover .pais__moneda:nth-child(3) { transform: translate(0.1875rem, -50%) rotate(6deg); } .pais__texto { min-width: 0; flex: 1; } .pais__nombre { display: block; font-family: var(--letra-titulo); font-size: 1.0625rem; line-height: 1.25; } .pais__detalle { display: block; font-size: 0.8125rem; color: var(--grafito); } .pais__pie { display: flex; gap: 0.75rem; align-items: baseline; margin-top: 0.25rem; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--grafito-claro); } .pais__cuenta { color: var(--oro); } /* ----------------------------------------------------------------- 11. Buscador general y búsqueda avanzada ----------------------------------------------------------------- */ .busqueda { margin-bottom: 2rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); } .busqueda__general { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 1rem; } .busqueda__campo { flex: 1 1 14rem; min-width: 0; padding: 0.6875rem 0.9375rem; border: 1px solid var(--filo-suave); border-radius: var(--radio); background-color: #FFF; color: var(--tinta); font: inherit; } .busqueda__campo:focus { border-color: var(--oro); outline: none; } .busqueda__avanzada { border-top: 1px solid var(--filo-suave); } .busqueda__llave { display: flex; gap: 0.5rem; align-items: center; padding: 0.8125rem 1rem; font-family: var(--letra-dato); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grafito); cursor: pointer; } .busqueda__llave::-webkit-details-marker { display: none; } .busqueda__llave::marker { content: ''; } .busqueda__llave:hover { color: var(--tinta); } .busqueda__signo { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--filo); border-radius: 50%; font-size: 0.875rem; line-height: 1; color: var(--oro); transition: transform var(--paso); } .busqueda__avanzada[open] .busqueda__signo { transform: rotate(45deg); } .busqueda__cuerpo { padding: 0 1rem 1rem; } .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.875rem 1rem; padding-top: 0.5rem; border-top: 1px solid var(--filo-suave); } .campo { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; } .campo__etiqueta { font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito); } .campo__control { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--filo-suave); border-radius: var(--radio); background-color: #FFF; color: var(--tinta); font: inherit; font-size: 0.875rem; } .campo__control:focus { border-color: var(--oro); outline: none; } .campo__pareja { display: flex; gap: 0.5rem; align-items: center; } .campo__hasta { font-family: var(--letra-dato); font-size: 0.75rem; color: var(--grafito-claro); } .campo--casilla { flex-direction: row; gap: 0.5rem; align-items: center; } /* Dentro de la grilla de búsqueda avanzada los campos llevan una etiqueta arriba: la casilla se corre al piso de la fila para quedar a su altura. */ .campos .campo--casilla { align-self: end; padding-bottom: 0.4375rem; } .campo--casilla input { width: 1rem; height: 1rem; accent-color: var(--oro); } .campo--casilla label { font-size: 0.8125rem; color: var(--grafito); } .campos__botones { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; margin-top: 1rem; } /* Resumen de lo que quedó filtrado */ .tamiz { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; } .tamiz__rotulo, .referencias__rotulo { font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grafito-claro); } .tamiz__ficha { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.25rem 0.625rem; border: 1px solid var(--filo); border-radius: 999px; background-color: var(--plato); font-size: 0.75rem; color: var(--grafito); } .tamiz__ficha b { font-weight: 500; color: var(--tinta); } /* ----------------------------------------------------------------- 12. Barra de resultados: cuenta, orden y vista ----------------------------------------------------------------- */ .resultados__barra { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--filo); } .resultados__cuenta { font-family: var(--letra-dato); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--grafito); } .resultados__cuenta b { font-weight: 500; color: var(--tinta); } .resultados__mandos { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .mando { display: flex; gap: 0.5rem; align-items: center; } .mando__etiqueta { font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito-claro); } .mando__control { padding: 0.375rem 0.5rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); color: var(--tinta); font: inherit; font-size: 0.8125rem; } .vista { display: flex; border: 1px solid var(--filo); border-radius: 999px; overflow: hidden; } .vista__opcion { padding: 0.375rem 0.8125rem; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grafito); transition: background-color var(--paso), color var(--paso); } .vista__opcion--activa { background-color: var(--terciopelo); color: var(--tinta-clara); } /* ----------------------------------------------------------------- 13. Vista de lista ordenable ----------------------------------------------------------------- */ .lista__marco { overflow-x: auto; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); } .lista { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.875rem; } .lista th, .lista td { padding: 0.6875rem 0.875rem; text-align: left; border-bottom: 1px solid var(--filo-suave); } .lista thead th { background-color: var(--bandeja-honda); font-family: var(--letra-dato); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito); white-space: nowrap; } .lista__orden { display: inline-flex; gap: 0.375rem; align-items: center; } .lista__orden:hover { color: var(--oro); } .lista__flecha--dormida { opacity: 0.35; } .lista tbody tr:hover { background-color: rgba(214, 183, 113, 0.1); } .lista tbody tr:last-child td { border-bottom: 0; } .lista__cuno { width: 3.5rem; } .lista__principal { font-family: var(--letra-titulo); font-size: 1rem; } .lista__principal:hover { color: var(--oro); } .lista__dato { font-family: var(--letra-dato); font-size: 0.8125rem; white-space: nowrap; color: var(--grafito); } .lista__tenue { color: var(--grafito-claro); } /* ----------------------------------------------------------------- 14. Paginado ----------------------------------------------------------------- */ .paginado { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: 1.5rem; border-top: 1px solid var(--filo); } .paginado__salto { padding: 0.5rem 1.125rem; border: 1px solid var(--filo); border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color var(--paso), color var(--paso); } .paginado__salto:hover { border-color: var(--oro); color: var(--oro); } .paginado__salto--inerte { opacity: 0.35; pointer-events: none; } .paginado__estado { font-size: 0.8125rem; color: var(--grafito); } /* ----------------------------------------------------------------- 15. Ficha de una pieza ----------------------------------------------------------------- */ .migas { padding: 1.25rem 0 0; } .migas__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--letra-dato); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--grafito-claro); } .migas__paso a:hover { color: var(--oro); text-decoration: underline; text-underline-offset: 0.2em; } .migas__separador { color: var(--filo); } .ficha { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); } /* Las dos caras, grandes, sobre la bandeja. */ .caras { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } .cara { display: flex; flex-direction: column; gap: 0.875rem; align-items: center; } .cara__marco { position: relative; display: block; width: 100%; padding: 0; border: 0; background-color: transparent; cursor: zoom-in; } /* El marco toma la proporción de la foto: ocupa todo el ancho disponible y el alto sale de ahí. Una foto vertical queda alta, que es exactamente lo que tiene que pasar para verla grande. */ .cara__fondo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background-color: var(--plato); background-image: radial-gradient(circle at 34% 24%, #FFF, var(--bandeja-honda) 78%); box-shadow: var(--sombra-pieza); } .cara--muy-alta .cara__fondo { aspect-ratio: 9 / 20; } .cara--alta .cara__fondo { aspect-ratio: 2 / 3; } .cara--cuadrada .cara__fondo { aspect-ratio: 1 / 1; } .cara--ancha .cara__fondo { aspect-ratio: 3 / 2; } .cara--muy-ancha .cara__fondo { aspect-ratio: 20 / 9; } .cara--disco .cara__fondo, .cara--disco .cara__imagen { border-radius: 50%; } .cara--lamina .cara__fondo, .cara--lamina .cara__imagen { border-radius: var(--radio); } /* La imagen llena el marco exacto: el marco ya tiene su misma proporción, así que no se recorta nada ni se deforma nada. */ .cara__imagen { width: 100%; height: 100%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(22, 28, 34, 0.14); transition: transform var(--paso); } .cara__marco:hover .cara__fondo { box-shadow: var(--sombra-alzada); } .cara__ausente { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; border: 1px dashed var(--filo); border-radius: var(--radio); color: var(--grafito-claro); font-size: 0.8125rem; } .cara__pie { display: flex; gap: 0.625rem; align-items: center; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grafito); } .cara__lupa { color: var(--oro); } /* Encabezado y ficha técnica */ .ficha__titulo { margin-bottom: 0.75rem; } .ficha__emisor { display: inline-flex; gap: 0.5rem; align-items: baseline; margin-bottom: 1.5rem; font-size: 0.9375rem; color: var(--grafito); } .ficha__emisor a { border-bottom: 1px solid var(--filo); color: var(--tinta); } .ficha__emisor a:hover { border-color: var(--oro); color: var(--oro); } .ficha__marcas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .marca-pieza { padding: 0.25rem 0.75rem; border: 1px solid var(--filo); border-radius: 999px; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito); } .marca-pieza--oro { border-color: rgba(138, 106, 34, 0.4); background-color: var(--oro-suave); color: var(--oro); } .tabla-ficha { border-top: 1px solid var(--filo); } .tabla-ficha__renglon { display: grid; grid-template-columns: minmax(7.5rem, 12rem) 1fr; gap: 0.5rem 1.5rem; padding: 0.8125rem 0; border-bottom: 1px solid var(--filo-suave); } .tabla-ficha__clave { font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito-claro); padding-top: 0.1875rem; } .tabla-ficha__valor { min-width: 0; overflow-wrap: break-word; } .tabla-ficha__valor--dato { font-family: var(--letra-dato); font-size: 0.9375rem; } .nota { margin-top: 2rem; padding: 1.25rem 1.375rem; border-left: 2px solid var(--oro); background-color: var(--plato); } .nota__rubro { margin-bottom: 0.5rem; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro); } .nota__texto { white-space: pre-line; overflow-wrap: break-word; } .cierre-seccion { margin-top: clamp(1.75rem, 4vw, 2.5rem); } .referencias { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; } .referencia { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.4375rem 0.875rem; border: 1px solid var(--filo); border-radius: 999px; font-size: 0.8125rem; color: var(--grafito); transition: border-color var(--paso), color var(--paso); } .referencia:hover { border-color: var(--oro); color: var(--oro); } .referencia__flecha { font-size: 0.75rem; } /* ----------------------------------------------------------------- 16. Encabezado de sección sobre terciopelo ----------------------------------------------------------------- */ .portico { background-color: var(--terciopelo); background-image: radial-gradient(ellipse 70% 90% at 82% 8%, rgba(64, 84, 124, 0.45), transparent 68%); color: var(--tinta-clara); } .portico__marco { max-width: var(--marco); margin: 0 auto; padding: clamp(2rem, 5vw, 3.25rem) var(--aire) clamp(2rem, 5vw, 3rem); } .portico__titular { margin-bottom: 0.875rem; } .portico .migas { padding-top: 0; margin-bottom: 1.5rem; } .portico .migas__lista { color: rgba(150, 161, 180, 0.9); } .portico .migas__separador { color: rgba(150, 161, 180, 0.5); } .portico__cifras { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; font-family: var(--letra-dato); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--tinta-clara-tenue); } .portico__cifras b { font-weight: 500; color: var(--oro-vivo); } /* ----------------------------------------------------------------- 17. Vacíos ----------------------------------------------------------------- */ .vacio { display: flex; flex-direction: column; gap: 0.875rem; align-items: center; padding: clamp(2.5rem, 8vw, 5rem) 1.5rem; border: 1px dashed var(--filo); border-radius: var(--radio); text-align: center; } .vacio__titulo { font-family: var(--letra-titulo); font-size: 1.375rem; } .vacio__texto { max-width: 40ch; color: var(--grafito); } /* ----------------------------------------------------------------- 18. Visor de imágenes grandes ----------------------------------------------------------------- */ .visor { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background-color: rgba(11, 17, 32, 0.96); color: var(--tinta-clara); } .visor[hidden] { display: none; } .visor__barra { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem var(--aire); border-bottom: 1px solid rgba(232, 234, 238, 0.12); } .visor__rotulo { font-family: var(--letra-dato); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-clara-tenue); } .visor__cerrar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(232, 234, 238, 0.25); border-radius: 50%; background: none; font-size: 1.375rem; line-height: 1; cursor: pointer; transition: border-color var(--paso), color var(--paso); } .visor__cerrar:hover { border-color: var(--oro-vivo); color: var(--oro-vivo); } .visor__lienzo { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: clamp(1rem, 3vw, 2.5rem); } .visor__imagen { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8); cursor: zoom-in; } /* Imagen acercada a su tamaño real: el lienzo se vuelve desplazable. */ .visor__lienzo--cerca { display: block; overflow: auto; } .visor__imagen--cerca { max-width: none; max-height: none; width: 112.5rem; margin: 0 auto; cursor: zoom-out; } .visor__paso { position: absolute; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(232, 234, 238, 0.25); border-radius: 50%; background-color: rgba(11, 17, 32, 0.7); font-size: 1.5rem; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: border-color var(--paso), color var(--paso); } .visor__paso:hover { border-color: var(--oro-vivo); color: var(--oro-vivo); } .visor__paso--previo { left: 0.75rem; } .visor__paso--siguiente { right: 0.75rem; } .visor-abierto { overflow: hidden; } /* ----------------------------------------------------------------- 18b. Catálogos de referencia ----------------------------------------------------------------- */ .catalogos__lista { display: flex; flex-direction: column; gap: 0.75rem; } .catalogos__item { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; align-items: baseline; padding: 0.875rem 1.125rem; border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); } .catalogos__anio { flex-shrink: 0; font-family: var(--letra-dato); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--oro); } .catalogos__texto { color: var(--tinta); } .catalogos__pedido { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--filo); border-radius: var(--radio); background-color: var(--plato); } .catalogos__pedido__titulo { margin-bottom: 1rem; } .catalogos__pedido__pasos { margin: 0 0 1.5rem; padding-left: 1.25rem; color: var(--grafito); } .catalogos__pedido__pasos li { margin-bottom: 0.375rem; } .catalogos__pedido__pasos li:last-child { margin-bottom: 0; } /* ----------------------------------------------------------------- 19. Pie ----------------------------------------------------------------- */ .pie { margin-top: clamp(3rem, 7vw, 5rem); background-color: var(--terciopelo); color: var(--tinta-clara); } .pie__marco { display: grid; gap: 2rem; max-width: var(--marco); margin: 0 auto; padding: clamp(2.25rem, 5vw, 3.25rem) var(--aire) 1.75rem; } .pie__nombre { margin-bottom: 0.625rem; font-family: var(--letra-titulo); font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; } .pie__texto { max-width: 46ch; font-size: 0.875rem; color: var(--tinta-clara-tenue); } .pie__nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: start; } .pie__rubro { margin-bottom: 0.375rem; font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oro-vivo); } .pie__enlace { font-size: 0.875rem; color: var(--tinta-clara-tenue); transition: color var(--paso); } .pie__enlace:hover { color: var(--tinta-clara); } .pie__firma { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; max-width: var(--marco); margin: 0 auto; padding: 1.25rem var(--aire) 2rem; border-top: 1px solid rgba(232, 234, 238, 0.12); font-family: var(--letra-dato); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-clara-tenue); } .pie__tenue { color: rgba(150, 161, 180, 0.7); } /* ----------------------------------------------------------------- 20. Adaptación a pantallas grandes ----------------------------------------------------------------- */ @media (min-width: 60rem) { .vitrina__marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .pie__marco { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr); } } @media (min-width: 48rem) { .caras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .abecedario { justify-content: center; } } /* ----------------------------------------------------------------- 21. Adaptación a pantallas chicas ----------------------------------------------------------------- */ @media (max-width: 61.9375rem) { .cabecera__abrir { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: auto; border: 1px solid rgba(232, 234, 238, 0.22); border-radius: var(--radio); cursor: pointer; } .cabecera__lineas, .cabecera__lineas::before, .cabecera__lineas::after { display: block; width: 1.125rem; height: 1px; background-color: var(--tinta-clara); } .cabecera__lineas::before, .cabecera__lineas::after { content: ''; position: relative; } .cabecera__lineas::before { top: -0.3125rem; } .cabecera__lineas::after { top: 0.25rem; } .navegacion { flex-basis: 100%; flex-direction: column; align-items: stretch; max-height: 0; overflow: hidden; transition: max-height var(--paso); } .navegacion__interruptor:checked ~ .navegacion { max-height: 22rem; padding-top: 0.75rem; } .navegacion__enlace { padding: 0.6875rem 0; border-bottom: 1px solid rgba(232, 234, 238, 0.1); } .navegacion__enlace::after { display: none; } .buscador-breve { margin: 0.875rem 0 0.5rem; } .buscador-breve__campo { width: 100%; flex: 1; } .abecedario { top: 4.25rem; } } @media (max-width: 34rem) { .grilla, .grilla--holgada { --alto-fila: 7.5rem; } .bandeja__pieza { margin-left: -1.5rem; } .bandeja__pieza:nth-child(4), .bandeja__pieza:nth-child(5) { display: none; } .vitrina__legajo { gap: 1rem 1.75rem; } .tabla-ficha__renglon { grid-template-columns: 1fr; gap: 0.125rem; } .visor__paso { width: 2.25rem; height: 2.25rem; } } /* ----------------------------------------------------------------- 22. Quien pide menos movimiento, recibe menos movimiento ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } /* Sin giro: al apuntar la pieza, el reverso aparece sin dar la vuelta. */ .cuno__giro { transform: none !important; } .cuno__cara--reverso { transform: none; opacity: 0; backface-visibility: visible; } .pieza__enlace:hover .cuno__cara--reverso, .pieza__enlace:focus-visible .cuno__cara--reverso, .bandeja__pieza:hover .cuno__cara--reverso, .bandeja__pieza:focus-within .cuno__cara--reverso { opacity: 1; } .cargando__cuno { animation: none; } }