.happy-collectors-page { padding-top: 5rem; background: var(--cantera); } .happy-collectors-header { padding: 6rem var(--px) 2.5rem; max-width: var(--max-w); margin: 0 auto; } .happy-collectors-header__label { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.35em; text-transform: uppercase; color: var(--warm-400); margin-bottom: 1rem; } .happy-collectors-header__title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; color: var(--warm-900); margin: 0 0 1.25rem; } .happy-collectors-header__desc { font-family: var(--font-sans); font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.65; color: var(--warm-600); max-width: 42rem; margin: 0; } /* ---- Masonry (CSS Grid + JS para el row-span) ---- */ .happy-collectors-gallery { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px) 6rem; } .hc-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 8px; /* unidad base; el span real lo calcula el JS */ column-gap: 1.5rem; row-gap: 0; /* el alto se controla con grid-row-end */ } .hc-card { display: block; width: 100%; margin: 0 0 1.5rem; /* separación vertical entre tarjetas */ padding: 0; border: 0; background: var(--warm-100, #f3efe9); cursor: pointer; overflow: hidden; border-radius: 2px; appearance: none; -webkit-appearance: none; } .hc-card__img { display: block; width: 100%; height: auto; transition: transform 0.5s ease, opacity 0.3s ease; } .hc-card:hover .hc-card__img, .hc-card:focus-visible .hc-card__img { transform: scale(1.04); } .hc-card:focus-visible { outline: 2px solid var(--warm-900); outline-offset: 2px; } /* ---- Lightbox ---- */ .hc-lightbox { position: fixed; inset: 0; z-index: 2000000; /* por encima de la navbar (portado a por JS) */ display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(20, 16, 12, 0.88); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .hc-lightbox.is-open { opacity: 1; visibility: visible; } .hc-lightbox__figure { position: relative; margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; transform: scale(0.97); transition: transform 0.25s ease; } .hc-lightbox.is-open .hc-lightbox__figure { transform: scale(1); } .hc-lightbox__img { display: block; /* Respeta un margen en los 4 lados restando el espacio del contenedor. */ max-width: calc(100vw - 8rem); max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .hc-lightbox__tag { position: absolute; left: 0; bottom: 0; margin: 1rem; padding: 0.55rem 1.1rem; background: #f97316; color: #fff; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .hc-lightbox__close { position: absolute; top: clamp(0.75rem, 3vw, 1.75rem); right: clamp(0.75rem, 3vw, 1.75rem); width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .hc-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); } .hc-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; z-index: 2; transition: background 0.2s ease; } .hc-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); } .hc-lightbox__nav--prev { left: clamp(0.5rem, 3vw, 2rem); } .hc-lightbox__nav--next { right: clamp(0.5rem, 3vw, 2rem); } @media (max-width: 1119px) { .happy-collectors-page { padding-top: var(--mad-topbar-h, 5rem); } .happy-collectors-header { padding-top: 0; } } @media (max-width: 600px) { .hc-masonry { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 1rem; } .hc-card { margin-bottom: 1rem; } }