.explorar-cats { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background-color: var(--color-bg, #fafafa); margin-top: 40px; padding-inline: var(--page-gutter, clamp(16px, 3.5vw, 80px)); } .explorar-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: clamp(var(--space-2, 0.5rem), 0.8vw, var(--space-4, 1rem)); height: clamp(220px, 30vh, 380px); } .cat-tile { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; color: var(--color-white, #fff); text-decoration: none; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); text-decoration: none; } .cat-tile__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.65) brightness(0.6); transition: filter 0.4s ease; } .cat-tile:hover .cat-tile__bg { filter: grayscale(0.2) brightness(0.85); } .cat-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%); } .cat-tile__name { position: relative; z-index: 1; font-family: var(--font-body); font-weight: var(--fw-medium, 500); font-size: clamp(1rem, 1.15vw, 1.25rem); color: var(--color-white, #fff); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); letter-spacing: 0.01em; } .explorar-cats__controls { display: none; } .explorar-cats__search-wrap { margin-top: 40px; } .explorar-cats[data-explorar-cats] .explorar-cats__search-ring { display: block; border: 1px solid var(--color-canon-red, #c8102e); border-radius: var(--radius-full, 9999px); padding: 2px; background-color: var(--color-white, #fff); } .explorar-cats[data-explorar-cats] .explorar-cats__search { position: relative; display: block; border: 1px solid var(--color-canon-red, #c8102e); border-radius: inherit; background-color: var(--color-white, #fff); } .explorar-cats[data-explorar-cats] .explorar-cats__search i { position: absolute; left: var(--space-3, 0.75rem); top: 50%; transform: translateY(-50%); color: var(--color-text-muted, #6c757d); pointer-events: none; font-size: 1.05rem; line-height: 1; z-index: 1; } .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"], .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"]:hover, .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"]:focus, .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"]:focus-visible { display: block; width: 100%; height: 38px; margin: 0; padding: 0 var(--space-3, 0.75rem) 0 calc(var(--space-3, 0.75rem) * 2 + 14px); border: 0; outline: 0; box-shadow: none; border-radius: inherit; font-family: var(--font-body); font-size: var(--fs-sm, 0.875rem); line-height: 1.2; color: var(--color-text, #212529); background-color: transparent; -webkit-appearance: none; appearance: none; } .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"]::placeholder { color: var(--color-text-muted, #6c757d); } .explorar-cats[data-explorar-cats] .explorar-cats__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .explorar-galleries { padding-block: clamp(var(--space-6, 1.5rem), 2vw, var(--space-10, 2.5rem)) clamp(var(--space-10, 2.5rem), 4vw, var(--space-16, 4rem)); padding-inline: var(--page-gutter, clamp(16px, 3.5vw, 80px)); } .gallery-row { margin: 40px 0; scroll-margin-top: calc(var(--header-height, 72px) + var(--space-6, 1.5rem)); } .gallery-row:first-of-type { padding-top: 0; } .gallery-row__header { gap: var(--space-3, 0.75rem); margin-bottom: clamp(var(--space-3, 0.75rem), 1.2vw, var(--space-5, 1.25rem)); } .gallery-row__title { font-family: var(--font-body); font-weight: var(--fw-semibold, 600); font-size: clamp(0.95rem, 1vw, 1.125rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-canon-red, #c8102e); margin: 0; } .gallery-row__more { font-family: var(--font-body); font-weight: var(--fw-regular, 400); font-size: clamp(0.8rem, 0.85vw, 0.95rem); color: var(--color-text, #212529); text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .gallery-row__more:hover { color: var(--color-canon-red, #c8102e); text-decoration: underline; } .gallery-row__collage-frame { position: relative; width: 100%; } .gallery-row__collage { width: 100%; } .gallery-row__collage [class*="col-"], .gallery-row__mosaic-cell { min-width: 0; min-height: 0; } @media (min-width: 768px) { .gallery-row__collage-frame { aspect-ratio: 1727 / 400; } .gallery-row__collage { position: absolute; inset: 0; } .gallery-row__collage > .row, .gallery-row__collage .h-100, .gallery-row__feature-col, .gallery-row__small-col, .gallery-row__half, .gallery-row__stack-2, .gallery-row__mosaic, .gallery-row__mosaic-cell { height: 100%; } .gallery-row__collage .gallery-photo { aspect-ratio: auto; height: 100%; min-height: 0; } .gallery-row__collage .gallery-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-row__small-col > .row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1rem; margin: 0; height: 100%; } .gallery-row__small-col > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; } } .gallery-row__half { flex: 1 1 0; } .gallery-row__stack-2 { flex-direction: column; } .gallery-row__mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: clamp(var(--space-2, 0.5rem), 1vw, var(--space-3, 0.75rem)); height: 100%; } .gallery-row__mosaic-cell--wide { grid-column: span 2; } .gallery-row__divider { margin-top: 40px; border-bottom: 1px solid var(--color-border, #e5e5e5); } .gallery-row:last-of-type .gallery-row__divider { display: none; } .gallery-photo { position: relative; display: block; overflow: hidden; border-radius: 8px; background-color: #eee; width: 100%; height: 100%; text-decoration: none; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .gallery-photo--feature, .gallery-photo--small { aspect-ratio: 414 / 191; } .gallery-photo--wide { aspect-ratio: 850 / 191; } .gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-photo:hover img { transform: scale(1.04); } .gallery-photo__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 44%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.85) 100% ); } .gallery-photo__label { position: absolute; left: var(--space-4, 1rem); bottom: var(--space-3, 0.75rem); font-family: var(--font-body); font-weight: var(--fw-medium, 500); font-size: clamp(0.95rem, 1.3vw, 1.5rem); color: var(--color-white, #fff); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .gallery-photo--small .gallery-photo__label, .gallery-photo--wide .gallery-photo__label { left: var(--space-3, 0.75rem); bottom: var(--space-2, 0.5rem); font-size: clamp(0.85rem, 1vw, 1.125rem); } .gallery-row.is-hidden, .cat-tile.is-hidden { display: none !important; } @media (max-width: 1024px) { .explorar-cats__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); height: clamp(200px, 20vh, 250px); } } @media (max-width: 768px) { .gallery-row__collage-frame { padding-top: 0; max-height: none; } .gallery-row__collage { position: static; } .gallery-row__mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 4 / 5; } .gallery-row__stack-2 { flex-direction: row; } .gallery-row__stack-2 .gallery-photo--wide { aspect-ratio: 414 / 191; } } @media (max-width: 480px) { .explorar-cats__viewport { position: relative; overflow: hidden; } .explorar-cats__grid { display: flex; height: auto; gap: 0; } .cat-tile { flex: 0 0 auto; width: calc(50% - var(--space-2, 0.5rem)); margin-right: var(--space-2, 0.5rem); aspect-ratio: 16 / 10; } .explorar-cats__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4, 1rem); margin-top: var(--space-3, 0.75rem); } .explorar-cats__arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px); border-radius: var(--radius-full, 9999px); background-color: transparent; border: 2px solid var(--color-canon-red-alt, #df1f26); color: var(--color-canon-red-alt, #df1f26); cursor: pointer; transition: background-color var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), color var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .explorar-cats__arrow:hover { background-color: var(--color-canon-red-alt, #df1f26); color: var(--color-white, #fff); transform: translateY(-2px); } .explorar-cats__arrow:focus-visible { outline: 2px solid var(--color-canon-red-alt, #df1f26); outline-offset: 3px; } .explorar-cats__arrow i { font-size: clamp(15px, 4vw, 19px); line-height: 1; } }