/* ════════════════════════════════════════════════════════════════ LAS CHAPAS DE JUAN · "El Archivo" Catálogo de coleccionista — papel cálido, tinta espresso, acentos bermellón/latón, tipografía editorial. ═══════════════════════════════════════════════════════════════ */ :root { /* Papel e tinta */ --paper: #efe4cd; --paper-soft: #e8d9bb; --card: #f4ecd9; --card-2: #f7f1e2; --ink: #241a10; --ink-2: #5e4a31; --ink-3: #725d40; /* antes #8a7350 (3,6:1); ahora 5:1 sobre --paper, cumple WCAG AA */ --line: #c9b488; --line-soft: #dcccaa; /* Acentos */ --vermilion: #bf3a22; --vermilion-d:#992c18; --brass: #b07d2b; --brass-l: #cfa24a; --green: #3c6748; /* Sombra cálida */ --shadow: rgba(74, 51, 20, 0.18); --shadow-lg: rgba(60, 40, 14, 0.30); --maxw: 1180px; --r: 14px; --cols-galeria: 5; /* columnas de El Archivo; script.js las lee para llenar filas enteras */ } @media (max-width: 1073px) { :root { --cols-galeria: 4; } } @media (max-width: 865px) { :root { --cols-galeria: 3; } } @media (max-width: 640px) { :root { --cols-galeria: 2; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* `hidden` debe ganar a cualquier display (p. ej. .is-pendiente usa flex) */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: 'Hanken Grotesk', 'PT Sans', system-ui, sans-serif; color: var(--ink); min-height: 100vh; line-height: 1.5; background-color: var(--paper); background-image: radial-gradient(circle at 12% -8%, rgba(176,125,43,0.10), transparent 42%), radial-gradient(circle at 92% 4%, rgba(191,58,34,0.07), transparent 40%), radial-gradient(circle at 50% 120%, rgba(60,103,72,0.08), transparent 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono { font-family: 'DM Mono', 'PT Mono', ui-monospace, monospace; font-feature-settings: "tnum"; } /* Grano de papel global */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); } /* ════════════ Reglas editoriales ════════════ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; } .rule { width: 100%; } .rule--thick { height: 5px; background: var(--ink); } .rule--thin { height: 1px; background: var(--line); } /* ════════════ Cabecera / masthead ════════════ */ .masthead { position: relative; z-index: 3; background: rgba(239, 228, 205, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: sticky; top: 0; } .masthead-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 22px; } /* Marca: logo dentro de chapa dentada */ .mark { background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .mark__cap { /* logo: chapa dibujada (logo.svg), ya trae su borde dentado */ display: grid; place-items: center; width: 58px; height: 58px; filter: drop-shadow(0 3px 5px rgba(74, 51, 20, .28)); transition: transform .25s ease, filter .25s ease; } .mark:hover .mark__cap { transform: rotate(-12deg) scale(1.05); filter: drop-shadow(0 8px 12px var(--shadow-lg)); } .mark__cap img { display: block; width: 100%; height: 100%; } .masthead-titles { flex: 1; min-width: 0; } /* El selector va fuera del