/* Active gallery geometry is isolated from decorative header/theme rules. */
body[data-gallery-active] #masonry[data-layout] {
    position:relative!important; display:block!important; columns:auto!important;
    width:100%!important; max-width:none!important; padding:0!important; margin:0!important;
    grid-template-columns:none!important; grid-auto-rows:auto!important; perspective:none!important;
    transition:none!important; animation:none!important;
}
body[data-gallery-active] #masonry[data-layout] .card {
    position:absolute!important; left:var(--layout-x)!important; top:var(--layout-y)!important;
    width:var(--layout-w)!important; height:var(--layout-h)!important;
    display:block!important; box-sizing:border-box!important; margin:0!important; padding:0!important;
    min-height:0!important; max-height:none!important; aspect-ratio:auto!important;
    border:0!important; border-radius:3px!important; overflow:hidden!important;
    transform:none!important; transition:opacity .2s!important; animation:none!important;
}
body[data-gallery-active] #masonry[data-layout] .card__btn,
body[data-gallery-active] #masonry[data-layout] .card__picture {
    position:relative!important; display:block!important; box-sizing:border-box!important;
    width:100%!important; height:100%!important; min-height:0!important; max-height:none!important;
    aspect-ratio:auto!important; margin:0!important; padding:0!important; border:0!important;
    border-radius:2px!important;
    transform:none!important; overflow:hidden!important;
}
body[data-gallery-active] #masonry[data-layout] .card__img {
    display:block!important; width:100%!important; height:100%!important; aspect-ratio:auto!important;
    object-fit:cover!important; transform:none!important;
    border-radius:0!important;
}
body[data-gallery-active] #masonry[data-layout] .card::before,
body[data-gallery-active] #masonry[data-layout] .card::after,
body[data-gallery-active] #masonry[data-layout] .card__picture::before,
body[data-gallery-active] #masonry[data-layout] .card__picture::after {display:none!important}
body[data-gallery-active] #masonry[data-layout] .card__title-base {
    position:absolute!important; inset:auto 0 0!important; padding:1.8rem .8rem .7rem!important;
    margin:0!important; background:linear-gradient(transparent,#000b)!important; color:#fff!important;
}
body[data-gallery-active] #masonry[data-layout] .card__title {color:#fff!important;background:none!important;margin:0!important}
body[data-gallery-active="scattered"] #masonry[data-layout] .card {
    padding:clamp(4px,.6vw,9px)!important; border:1px solid var(--accent)!important;
    background:color-mix(in srgb,var(--accent) 16%,var(--bg-card))!important;
    box-shadow:0 3px 12px #0003; transform:rotate(var(--album-angle,0deg))!important;
}
body[data-gallery-active="asymmetric"] #masonry[data-layout] {overflow-x:clip!important}
body[data-gallery-active="mosaic"] .gallery-section {
    background:color-mix(in srgb,var(--active-photo-tone,var(--bg)) 22%,var(--bg))!important;
    transition:background-color .6s ease;
}
body[data-gallery-active="mosaic"][data-active-photo-tone="true"] {
    background-color:color-mix(in srgb,var(--active-photo-tone) 16%,var(--bg));
}
body[data-gallery-active="mosaic"] #masonry[data-layout] .card {
    box-shadow:0 4px 24px color-mix(in srgb,var(--photo-tone,var(--accent)) 22%,transparent);
}
body[data-gallery-active] #masonry[data-layout="category-rails"] .card {
    position:relative!important; inset:auto!important; flex:0 0 clamp(180px,26vw,400px)!important;
    width:clamp(180px,26vw,400px)!important; height:auto!important; aspect-ratio:1!important;
    scroll-snap-align:start;
}
.category-rail {min-width:0;margin-bottom:clamp(2rem,4vw,4rem)}
.category-rail__header {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line);padding-bottom:.8rem}
.category-rail__title {display:block!important;color:var(--accent);font:500 clamp(1.3rem,3vw,2.4rem)/1.15 var(--serif);margin:0;letter-spacing:.02em}
.category-rail__controls {display:flex;gap:.5rem;flex:none}
.category-rail__arrow {display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--bg-soft);color:var(--accent);font:24px var(--sans);cursor:pointer}
.category-rail__arrow:hover:not(:disabled) {background:var(--accent);color:var(--bg)}
.category-rail__arrow:disabled {opacity:.3;cursor:default}
.category-rail__arrow:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.category-rail__track {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-bottom:12px}
/* Hiding must win over every display declaration, including themed cards. */
body[data-gallery-active] #masonry[data-layout] .card.is-hidden,
body[data-gallery-active] #masonry[data-layout] .card[hidden],
#masonry .card.is-hidden,
#masonry .card[hidden] {display:none!important}
@media(max-width:768px) {
    body[data-gallery-active] #masonry[data-layout="category-rails"] .card {flex-basis:65vw!important;width:65vw!important}
}
@media(prefers-reduced-motion:reduce) {body[data-gallery-active="mosaic"] .gallery-section {transition:none}}

/* New compositions share the same geometry and stay independent of hover and palette. */
body[data-gallery-active="exhibition"] #masonry[data-layout] .card {border-radius:0!important}
body[data-gallery-active="exhibition"] #masonry[data-layout] .card__picture,
body[data-gallery-active="exhibition"] #masonry[data-layout] .card__img {object-fit:contain!important}
body[data-gallery-active="exhibition"] #masonry[data-layout] .card__picture {background:var(--bg-card)!important}
body[data-gallery-active="contact-sheet"] #masonry[data-layout] {counter-reset:contact-photo}
body[data-gallery-active="contact-sheet"] #masonry[data-layout] .card {counter-increment:contact-photo;border-radius:0!important}
body[data-gallery-active="contact-sheet"] #masonry[data-layout] .card__picture {background:var(--bg-card)!important}
body[data-gallery-active="contact-sheet"] #masonry[data-layout] .card__img {object-fit:cover!important}
body[data-gallery-active="contact-sheet"] #masonry[data-layout] .card::after {
    content:counter(contact-photo,decimal-leading-zero)!important;display:grid!important;place-items:center;
    position:absolute!important;inset:.45rem auto auto .45rem!important;width:2rem;height:1.6rem;
    color:var(--bg);background:var(--accent);font:600 .64rem/1 var(--sans);letter-spacing:.08em;z-index:5;
}
body[data-gallery-active="narrative"] #masonry[data-layout] .card:first-child .card__picture {border-radius:0!important}
body[data-gallery-active="triptych"] #masonry[data-layout] .card__picture {border-radius:0!important}

/* Hover effects follow the geometry reset so they cannot be flattened by it. */
body[data-gallery-active][data-hover] #masonry[data-layout] .card__img {
    transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease!important;
}
body[data-gallery-active][data-hover] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {opacity:1}
body[data-gallery-active][data-hover="soft"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:scale(1.045)!important;filter:brightness(1.1) saturate(1.2)!important}
body[data-gallery-active][data-hover="zoom"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:scale(1.22)!important}
body[data-gallery-active][data-hover="lift"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:translateY(-9px) scale(1.08)!important;filter:brightness(1.18)!important}
body[data-gallery-active][data-hover="reveal"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:scale(1.1)!important;filter:contrast(1.35) saturate(1.55)!important}
body[data-gallery-active][data-hover="tint"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:scale(1.07)!important;filter:sepia(.75) hue-rotate(-12deg) saturate(1.5)!important}
body[data-gallery-active][data-hover="frame"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__picture {outline:3px solid var(--accent)!important;outline-offset:-4px!important}
body[data-gallery-active][data-hover="slide"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:translateX(14px) scale(1.12)!important}
body[data-gallery-active][data-hover="tilt"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:perspective(500px) rotateY(-11deg) scale(1.12)!important}
body[data-gallery-active][data-hover="focus"] #masonry[data-layout] .card__img {filter:grayscale(1) brightness(.78)!important}
body[data-gallery-active][data-hover="focus"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__img {transform:scale(1.08)!important;filter:grayscale(0) contrast(1.15) brightness(1.08)!important}
body[data-gallery-active][data-hover="shine"] #masonry[data-layout] .card__picture::after {
    content:""!important;display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:3!important;
    background:linear-gradient(110deg,transparent 30%,#ffffff99 48%,transparent 65%)!important;
    transform:translateX(-130%)!important;transition:transform .75s ease!important;
}
body[data-gallery-active][data-hover="shine"] #masonry[data-layout] .card__btn:is(:hover,:focus-visible,:active) .card__picture::after {transform:translateX(130%)!important}

@media(prefers-reduced-motion:reduce) {
    body[data-gallery-active][data-hover] #masonry[data-layout] .card__img,
    body[data-gallery-active][data-hover] #masonry[data-layout] .card__picture::after {transition:none!important}
}

/* Las tarjetas inclinadas no deben ampliar el lienzo horizontal en móviles o pantallas estrechas. */
body[data-gallery-active="scattered"] #masonry[data-layout] {
    overflow-x: clip !important;
}

/* Efectos hover también para las imágenes de las galerías premium. Se anima el contenido de la foto,
   no la carta, para conservar las transformaciones 3D y el posicionamiento de cada diseño. */
body[data-hover="soft"] { --premium-hover-transform:scale(1.045); --premium-hover-filter:brightness(1.1) saturate(1.2); }
body[data-hover="zoom"] { --premium-hover-transform:scale(1.16); }
body[data-hover="lift"] { --premium-hover-transform:translateY(-6px) scale(1.06); --premium-hover-filter:brightness(1.15); }
body[data-hover="reveal"] { --premium-hover-transform:scale(1.08); --premium-hover-filter:contrast(1.28) saturate(1.4); }
body[data-hover="tint"] { --premium-hover-transform:scale(1.06); --premium-hover-filter:sepia(.62) saturate(1.45); }
body[data-hover="slide"] { --premium-hover-transform:translateX(8px) scale(1.06); }
body[data-hover="tilt"] { --premium-hover-transform:perspective(700px) rotateY(-7deg) scale(1.06); }
body[data-hover="focus"] { --premium-hover-transform:scale(1.05); --premium-hover-filter:grayscale(0) contrast(1.12) brightness(1.08); }
body[data-hover] :is(#deck .deck__img, #deck .cyl__img, #bubbles .bubbles__img) {
    transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease!important;
}
body[data-hover="focus"] :is(#deck .deck__img, #deck .cyl__img, #bubbles .bubbles__img) {
    filter:grayscale(.82)!important;
}
body[data-hover] :is(#deck .deck__link, #deck .cyl__link, #bubbles .bubbles__link):is(:hover,:focus-visible,:active) :is(.deck__img,.cyl__img,.bubbles__img) {
    transform:var(--premium-hover-transform,none)!important;
    filter:var(--premium-hover-filter,none)!important;
}
body[data-hover="frame"] :is(#deck .deck__link, #deck .cyl__link, #bubbles .bubbles__link):is(:hover,:focus-visible,:active) {
    outline:3px solid var(--accent)!important;
    outline-offset:-4px!important;
}
body[data-hover="shine"] :is(#deck .deck__picture, #deck .cyl__picture, #bubbles .bubbles__picture)::after {
    content:""!important;
    position:absolute!important;
    inset:0!important;
    display:block!important;
    z-index:4!important;
    pointer-events:none!important;
    background:linear-gradient(110deg,transparent 30%,#ffffff99 48%,transparent 65%)!important;
    transform:translateX(-130%)!important;
    transition:transform .75s ease!important;
}
body[data-hover="shine"] :is(#deck .deck__link, #deck .cyl__link, #bubbles .bubbles__link):is(:hover,:focus-visible,:active) :is(.deck__picture,.cyl__picture,.bubbles__picture)::after {
    transform:translateX(130%)!important;
}
body[data-hover="shine"] #bubbles .bubbles__picture::after {
    border-radius:inherit;
}
@media(prefers-reduced-motion:reduce) {
    body[data-hover] :is(#deck .deck__img, #deck .cyl__img, #bubbles .bubbles__img),
    body[data-hover="shine"] :is(#deck .deck__picture, #deck .cyl__picture, #bubbles .bubbles__picture)::after {
        transition:none!important;
    }
}