/* Wicion V34 · Collage de fotos · 8 estilos */

.photo-collage[data-collage-effect]{
    text-align:center;
}
.photo-collage[data-collage-effect] .photo-collage-card{
    position:relative;
    margin:24px auto 0;
    box-sizing:border-box;
}
.photo-collage[data-collage-effect] .collage-photo{
    user-select:none;
    -webkit-user-drag:none;
}

/* 1 · BARAJA DESLIZANTE */
.photo-collage[data-collage-effect="deck"] .photo-collage-card{
    width:min(340px,90%);
    height:390px;
    cursor:pointer;
    perspective:1000px;
}
.photo-collage[data-collage-effect="deck"] .collage-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border:9px solid #fff;
    border-radius:16px;
    box-shadow:var(--card-shadow,0 16px 34px rgba(0,0,0,.22));
    background:#fff;
    transition:transform .55s ease,opacity .45s ease;
}
.photo-collage[data-collage-effect="deck"] .collage-photo:nth-child(5n+1){transform:rotate(-4deg) translate(-7px,4px)}
.photo-collage[data-collage-effect="deck"] .collage-photo:nth-child(5n+2){transform:rotate(5deg) translate(10px,11px)}
.photo-collage[data-collage-effect="deck"] .collage-photo:nth-child(5n+3){transform:rotate(-7deg) translate(-12px,16px)}
.photo-collage[data-collage-effect="deck"] .collage-photo:nth-child(5n+4){transform:rotate(3deg) translate(13px,23px)}
.photo-collage[data-collage-effect="deck"] .collage-photo:nth-child(5n+5){transform:rotate(-2deg) translate(0,30px)}
.photo-collage[data-collage-effect="deck"] .collage-photo.is-removed{
    opacity:0;
    transform:translateX(130%) rotate(14deg) scale(.85)!important;
}

/* 2 · CARRUSEL 3D INFINITO */
.photo-collage[data-collage-effect="carousel3d"] .photo-collage-card{
    width:min(390px,96%);
    height:360px;
    perspective:1100px;
    overflow:visible;
    cursor:pointer;
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo{
    position:absolute;
    left:50%;
    top:50%;
    width:68%;
    height:92%;
    object-fit:cover;
    border:7px solid #fff;
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.26);
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
    transition:transform .62s cubic-bezier(.2,.8,.2,1),opacity .48s ease,filter .48s ease;
    pointer-events:none;
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo.c3-center{
    opacity:1;z-index:5;
    transform:translate(-50%,-50%) translateX(0) rotateY(0) scale(1);
    filter:none;
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo.c3-left{
    opacity:.68;z-index:3;
    transform:translate(-50%,-50%) translateX(-45%) rotateY(48deg) scale(.72);
    filter:brightness(.8);
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo.c3-right{
    opacity:.68;z-index:3;
    transform:translate(-50%,-50%) translateX(45%) rotateY(-48deg) scale(.72);
    filter:brightness(.8);
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo.c3-far-left{
    opacity:.18;z-index:1;
    transform:translate(-50%,-50%) translateX(-72%) rotateY(60deg) scale(.55);
}
.photo-collage[data-collage-effect="carousel3d"] .collage-photo.c3-far-right{
    opacity:.18;z-index:1;
    transform:translate(-50%,-50%) translateX(72%) rotateY(-60deg) scale(.55);
}

/* 3 · MOSAICO VIVO */
.photo-collage[data-collage-effect="mosaic"] .photo-collage-card{
    width:min(430px,96%);
    height:auto!important;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:145px;
    gap:10px;
    perspective:none;
    overflow:visible;
    cursor:default;
}
.photo-collage[data-collage-effect="mosaic"] .collage-photo{
    position:relative!important;
    inset:auto!important;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    opacity:1!important;
    transform:none!important;
    transition:transform .35s ease,box-shadow .35s ease,filter .35s ease;
}
.photo-collage[data-collage-effect="mosaic"] .collage-photo:nth-child(5n+1){grid-row:span 2}
.photo-collage[data-collage-effect="mosaic"] .collage-photo:nth-child(7n+4){grid-column:span 2}
.photo-collage[data-collage-effect="mosaic"] .collage-photo:hover{
    transform:translateY(-4px) scale(1.02)!important;
    box-shadow:0 18px 36px rgba(0,0,0,.24);
    z-index:3;
}
.photo-collage[data-collage-effect="mosaic"] .collage-photo.is-mosaic-focus{
    position:fixed!important;
    z-index:9999!important;
    inset:50% auto auto 50%!important;
    width:min(86vw,520px)!important;
    height:min(76vh,660px)!important;
    transform:translate(-50%,-50%)!important;
    object-fit:contain;
    background:#111;
    border:8px solid #fff;
    box-shadow:0 24px 80px rgba(0,0,0,.52);
}

/* 4 · CINTA CINEMATOGRÁFICA */
.photo-collage[data-collage-effect="film"] .photo-collage-card{
    width:min(100%,520px);
    height:285px;
    overflow:hidden;
    cursor:default;
    perspective:none;
    padding:26px 0;
    background:
      linear-gradient(#111,#111) top/100% 18px no-repeat,
      linear-gradient(#111,#111) bottom/100% 18px no-repeat;
    border-radius:10px;
}
.photo-collage[data-collage-effect="film"] .photo-collage-card::before,
.photo-collage[data-collage-effect="film"] .photo-collage-card::after{
    content:"";
    position:absolute;
    z-index:4;
    left:0;right:0;height:7px;
    pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0 11px,#eee 11px 18px,transparent 18px 29px);
}
.photo-collage[data-collage-effect="film"] .photo-collage-card::before{top:6px}
.photo-collage[data-collage-effect="film"] .photo-collage-card::after{bottom:6px}
.photo-collage[data-collage-effect="film"] .collage-film-track{
    display:flex;
    align-items:center;
    gap:12px;
    width:max-content;
    height:100%;
    animation:wicionFilmV34 var(--collage-film-duration,24s) linear infinite;
    will-change:transform;
}
.photo-collage[data-collage-effect="film"] .photo-collage-card:hover .collage-film-track{animation-play-state:paused}
.photo-collage[data-collage-effect="film"] .collage-photo{
    position:relative!important;
    inset:auto!important;
    flex:0 0 178px;
    width:178px!important;
    height:225px!important;
    object-fit:cover;
    border:5px solid #fff;
    border-radius:5px;
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.24);
    opacity:1!important;
    transform:none!important;
}
@keyframes wicionFilmV34{from{transform:translateX(0)}to{transform:translateX(var(--collage-film-shift,-50%))}}

/* 5 · ÓRBITA 3D */
.photo-collage[data-collage-effect="orbit3d"] .photo-collage-card{
    width:min(430px,96%);
    height:390px;
    perspective:1200px;
    overflow:visible;
    cursor:pointer;
}
.photo-collage[data-collage-effect="orbit3d"] .collage-photo{
    position:absolute;
    left:50%;
    top:50%;
    width:52%;
    height:72%;
    object-fit:cover;
    border:6px solid #fff;
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 38px rgba(0,0,0,.24);
    opacity:var(--orbit-opacity,.4);
    transform:
      translate(-50%,-50%)
      translate(var(--orbit-x,0),var(--orbit-y,0))
      scale(var(--orbit-scale,.7));
    transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .65s ease,filter .65s ease;
    filter:brightness(.78) saturate(.9);
}
.photo-collage[data-collage-effect="orbit3d"] .collage-photo.orbit-front{
    filter:none;
    box-shadow:0 22px 50px rgba(0,0,0,.34);
}

/* 6 · ACORDEÓN FOTOGRÁFICO */
.photo-collage[data-collage-effect="accordion"] .photo-collage-card{
    width:min(440px,96%);
    height:350px;
    display:flex;
    gap:6px;
    overflow:hidden;
    border-radius:18px;
    background:rgba(0,0,0,.06);
}
.photo-collage[data-collage-effect="accordion"] .collage-photo{
    position:relative!important;
    inset:auto!important;
    flex:1 1 0;
    min-width:0;
    height:100%;
    object-fit:cover;
    border:0;
    border-radius:12px;
    opacity:.72!important;
    transform:none!important;
    filter:saturate(.75) brightness(.8);
    transition:flex .72s cubic-bezier(.2,.8,.2,1),filter .5s ease,opacity .5s ease;
    cursor:pointer;
}
.photo-collage[data-collage-effect="accordion"] .collage-photo.accordion-active{
    flex:5 1 0;
    opacity:1!important;
    filter:none;
}

/* 7 · ZOOM CINEMATOGRÁFICO */
.photo-collage[data-collage-effect="kenburns"] .photo-collage-card{
    width:min(420px,94%);
    height:380px;
    overflow:hidden;
    border-radius:20px;
    background:#111;
    box-shadow:0 18px 44px rgba(0,0,0,.27);
    cursor:pointer;
}
.photo-collage[data-collage-effect="kenburns"] .collage-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border:0;
    border-radius:20px;
    opacity:0;
    transform:scale(1);
    transition:opacity 1s ease;
}
.photo-collage[data-collage-effect="kenburns"] .collage-photo.kb-active{
    opacity:1;
    z-index:2;
}
.photo-collage[data-collage-effect="kenburns"] .collage-photo.kb-active.kb-anim{
    animation:wicionKenBurnsV34 4.3s ease-out both;
}
@keyframes wicionKenBurnsV34{
    from{transform:scale(1.02) translate(0,0)}
    to{transform:scale(1.13) translate(-2.5%,-1.5%)}
}

/* 8 · PÁGINA DE ÁLBUM */
.photo-collage[data-collage-effect="pageflip"] .photo-collage-card{
    width:min(380px,92%);
    height:390px;
    perspective:1400px;
    overflow:visible;
    cursor:pointer;
}
.photo-collage[data-collage-effect="pageflip"] .collage-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border:8px solid #fff;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.26);
    opacity:0;
    transform-origin:left center;
    transform:rotateY(0deg);
    backface-visibility:hidden;
}
.photo-collage[data-collage-effect="pageflip"] .collage-photo.page-active{
    opacity:1;
    z-index:3;
}
.photo-collage[data-collage-effect="pageflip"] .collage-photo.page-next{
    opacity:1;
    z-index:2;
}
.photo-collage[data-collage-effect="pageflip"] .collage-photo.page-turning{
    z-index:4;
    animation:wicionPageTurnV34 .76s cubic-bezier(.3,.7,.2,1) forwards;
}
@keyframes wicionPageTurnV34{
    0%{opacity:1;transform:rotateY(0deg)}
    78%{opacity:1}
    100%{opacity:0;transform:rotateY(-105deg)}
}

@media(max-width:430px){
    .photo-collage[data-collage-effect="deck"] .photo-collage-card{height:330px}
    .photo-collage[data-collage-effect="carousel3d"] .photo-collage-card{height:320px}
    .photo-collage[data-collage-effect="mosaic"] .photo-collage-card{grid-auto-rows:125px;gap:8px}
    .photo-collage[data-collage-effect="film"] .photo-collage-card{height:245px}
    .photo-collage[data-collage-effect="film"] .collage-photo{flex-basis:150px;width:150px!important;height:185px!important}
    .photo-collage[data-collage-effect="orbit3d"] .photo-collage-card{height:330px}
    .photo-collage[data-collage-effect="accordion"] .photo-collage-card{height:300px;gap:4px}
    .photo-collage[data-collage-effect="kenburns"] .photo-collage-card{height:330px}
    .photo-collage[data-collage-effect="pageflip"] .photo-collage-card{height:345px}
}

@media(prefers-reduced-motion:reduce){
    .photo-collage[data-collage-effect="film"] .collage-film-track,
    .photo-collage[data-collage-effect="kenburns"] .collage-photo.kb-active.kb-anim,
    .photo-collage[data-collage-effect="pageflip"] .collage-photo.page-turning{
        animation:none!important;
    }
    .photo-collage[data-collage-effect] .collage-photo{
        transition:none!important;
    }
}


/* ==========================================================
   V34.1 · Texto inferior configurable por cada efecto
   ========================================================== */
.photo-collage .collage-hint.wicion-collage-hint-v341{
    display:block;
    margin:
        var(--collage-hint-mt,12px)
        auto
        var(--collage-hint-mb,0px);
    padding:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    font-family:var(--collage-hint-font,inherit);
    font-size:var(--collage-hint-size,12px);
    color:var(--collage-hint-color,currentColor);
    text-align:var(--collage-hint-align,center);
    font-weight:var(--collage-hint-weight,400);
    font-style:var(--collage-hint-style,normal);
    letter-spacing:var(--collage-hint-spacing,0px);
    line-height:var(--collage-hint-line-height,1.35);
    text-transform:var(--collage-hint-transform,none);
    opacity:1;
}