.zf-logo-buttons-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--zf-gap,20px);
    width:100%;
}

.zf-logo-button{
    position:relative;
    isolation:isolate;
    min-width:0;
    height:var(--zf-card-height,140px);
    background:var(--zf-card-bg,#fff);
    border:var(--zf-border-width,2px) solid var(--zf-border-color,#0b4f9c);
    border-radius:var(--zf-radius,18px);
    box-shadow:var(--zf-shadow,0 10px 28px rgba(8,40,90,.18),0 3px 8px rgba(0,0,0,.08));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--zf-padding,20px);
    text-decoration:none!important;
    overflow:hidden;
    transform:translateZ(0);
    transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease,border-color .28s ease;
}

/* Filete interior azul: suma profundidad sin recargar el logo */
.zf-logo-button::before{
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid var(--zf-accent,#1677d2);
    border-radius:calc(var(--zf-radius,18px) - 5px);
    opacity:.34;
    pointer-events:none;
    z-index:0;
}

/* Brillo diagonal al interactuar */
.zf-logo-button::after{
    content:"";
    position:absolute;
    top:-55%;
    left:-80%;
    width:45%;
    height:210%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
    transform:rotate(18deg);
    opacity:0;
    pointer-events:none;
    z-index:1;
}

.zf-logo-button:hover,
.zf-logo-button:focus{
    transform:translateY(var(--zf-hover-lift,-7px)) scale(1.018);
    background:var(--zf-hover-bg,var(--zf-card-bg,#fff));
    border-color:var(--zf-accent,#1677d2);
    box-shadow:0 18px 38px rgba(8,55,120,.25),0 6px 14px rgba(0,0,0,.10);
    outline:none;
}

.zf-logo-button:hover::before,
.zf-logo-button:focus::before{
    opacity:.72;
}

.zf-logo-button:hover::after,
.zf-logo-button:focus::after{
    opacity:1;
    animation:zfLogoShine .8s ease forwards;
}

.zf-logo-button img{
    position:relative;
    z-index:2;
    display:block;
    max-width:var(--zf-logo-width,82%);
    max-height:var(--zf-logo-height,82px);
    width:auto;
    height:auto;
    object-fit:contain;
    transition:transform .28s ease,filter .28s ease;
}

.zf-logo-button:hover img,
.zf-logo-button:focus img{
    transform:scale(1.035);
}

@keyframes zfLogoShine{
    0%{left:-80%;}
    100%{left:135%;}
}

/* Movimiento sutil exclusivo de escritorio */
@keyframes zfLogoFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}

@media (min-width:768px){
    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button{
        animation:zfLogoFloat var(--zf-float-duration,4.8s) ease-in-out infinite;
        will-change:transform;
    }

    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button:nth-child(2){animation-delay:.35s;}
    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button:nth-child(3){animation-delay:.70s;}
    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button:nth-child(4){animation-delay:1.05s;}

    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button:hover,
    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button:focus{
        animation-play-state:paused;
        transform:translateY(var(--zf-hover-lift,-7px)) scale(1.018);
    }
}

@media (max-width:767px){
    .zf-logo-buttons-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:var(--zf-gap-mobile,12px);
    }

    .zf-logo-button{
        height:var(--zf-card-height-mobile,105px);
        padding:var(--zf-padding-mobile,12px);
        border-radius:var(--zf-radius-mobile,var(--zf-radius,18px));
        box-shadow:0 7px 18px rgba(8,40,90,.16),0 2px 6px rgba(0,0,0,.06);
    }

    .zf-logo-button::before{
        border-radius:calc(var(--zf-radius-mobile,var(--zf-radius,18px)) - 5px);
    }

    .zf-logo-button img{
        max-width:var(--zf-logo-width-mobile,90%);
        max-height:var(--zf-logo-height-mobile,65px);
    }
}

@media (prefers-reduced-motion:reduce){
    .zf-logo-button,
    .zf-logo-button img,
    .zf-logo-buttons-grid.zf-motion-on .zf-logo-button{
        animation:none!important;
        transition:none!important;
    }
}