/**
 * Logos con Enlace — estilos del front
 *
 * Todo se controla con variables --zdll-* que escribe el editor de Creative
 * Elements sobre .zdll. Tarjeta: --row (logo + nombre + flecha) o --column.
 *
 * @author    Z Digital
 * @copyright 2026 Z Digital
 */

.zdll {
    --zdll-cols: 3;
    --zdll-gap: 18px;
    --zdll-head-gap: 26px;
    --zdll-title: #12206b;
    --zdll-accent: #c2309a;
    --zdll-sub: #2b3045;
    --zdll-bar1: #c2309a;
    --zdll-bar2: #a6c93a;
    --zdll-bar-w: 42px;
    --zdll-bar-h: 5px;
    --zdll-card-bg: #fff;
    --zdll-card-bg-h: var(--zdll-card-bg);
    --zdll-card-bd: #e2e6ee;
    --zdll-card-bd-h: #2f62c8;
    --zdll-card-bw: 1px;
    --zdll-card-r: 12px;
    --zdll-logo: 86px;
    --zdll-logo-pad: 0px;
    --zdll-logo-bg: transparent;
    --zdll-letter-bg: #e3edfb;
    --zdll-letter: #2f62c8;
    --zdll-letter-k: .42;
    --zdll-name: #12206b;
    --zdll-name-h: var(--zdll-name);
    --zdll-inner-gap: 22px;
    --zdll-arrow: #12206b;
    --zdll-arrow-h: #2f62c8;
    --zdll-arrow-s: 18px;
    --zdll-mw: 78%;

    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
}

.zdll *,
.zdll *::before,
.zdll *::after {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .zdll { --zdll-cols: 2; --zdll-logo: 72px; }
}

@media (max-width: 767px) {
    .zdll { --zdll-cols: 1; --zdll-logo: 60px; --zdll-gap: 12px; }
}

/* ---------- encabezado ---------- */
.zdll-head {
    margin: 0 0 var(--zdll-head-gap);
}

.zdll .zdll-title {
    margin: 0;
    padding: 0;
    color: var(--zdll-title);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-transform: none;
}

.zdll-accent {
    color: var(--zdll-accent);
    font-style: normal;
}

.zdll-bars {
    display: flex;
    gap: calc(var(--zdll-bar-h) * 1.6);
    margin-top: 12px;
}

.zdll-bars i {
    display: block;
    width: var(--zdll-bar-w);
    height: var(--zdll-bar-h);
    border-radius: 99px;
    background: var(--zdll-bar1);
    transform-origin: left center;
}

.zdll-bars i + i {
    background: var(--zdll-bar2);
}

.zdll .zdll-sub {
    margin: 16px 0 0;
    color: var(--zdll-sub);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.45;
}

.zdll--align-center .zdll-head { text-align: center; }
.zdll--align-center .zdll-bars { justify-content: center; }
.zdll--align-right .zdll-head { text-align: right; }
.zdll--align-right .zdll-bars { justify-content: flex-end; }

/* ---------- grilla ---------- */
.zdll .zdll-grid {
    display: grid;
    grid-template-columns: repeat(var(--zdll-cols), minmax(0, 1fr));
    gap: var(--zdll-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zdll .zdll-item {
    display: flex;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.zdll .zdll-item::before,
.zdll .zdll-item::marker {
    content: none;
}

/* ---------- tarjeta ---------- */
.zdll .zdll-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--zdll-inner-gap);
    width: 100%;
    padding: 18px 22px;
    background: var(--zdll-card-bg);
    border: var(--zdll-card-bw) solid var(--zdll-card-bd);
    border-radius: var(--zdll-card-r);
    color: var(--zdll-name);
    text-decoration: none;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .2s ease, background-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.zdll--shadow .zdll-card {
    box-shadow: 0 1px 2px rgba(18, 32, 107, .04), 0 6px 18px -10px rgba(18, 32, 107, .18);
}

.zdll a.zdll-card:hover,
.zdll a.zdll-card:focus-visible {
    background: var(--zdll-card-bg-h);
    border-color: var(--zdll-card-bd-h);
    color: var(--zdll-name);
    text-decoration: none;
}

.zdll a.zdll-card:focus-visible {
    outline: 2px solid var(--zdll-card-bd-h);
    outline-offset: 2px;
}

.zdll--lift a.zdll-card:hover {
    transform: translateY(-4px);
}

.zdll--hshadow a.zdll-card:hover {
    box-shadow: 0 2px 4px rgba(18, 32, 107, .05), 0 18px 36px -14px rgba(18, 32, 107, .32);
}

.zdll--column .zdll-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: calc(var(--zdll-inner-gap) * .6);
}

/* ---------- logo ---------- */
.zdll-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--zdll-logo);
    height: var(--zdll-logo);
    padding: var(--zdll-logo-pad);
    overflow: hidden;
    background: var(--zdll-logo-bg);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}

.zdll-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    transition: filter .3s ease, opacity .3s ease;
}

.zdll--logo-circle .zdll-logo { border-radius: 50%; }
.zdll--logo-rounded .zdll-logo { border-radius: 22%; }
.zdll--logo-square .zdll-logo { border-radius: 0; }

.zdll--logo-free .zdll-logo--img {
    width: auto;
    max-width: calc(var(--zdll-logo) * 1.9);
    border-radius: 0;
}

.zdll--logo-free .zdll-logo--img img {
    width: auto;
    max-width: 100%;
}

.zdll--logo-free .zdll-logo--letter {
    border-radius: 50%;
}

.zdll-logo--letter {
    background: var(--zdll-letter-bg);
    color: var(--zdll-letter);
}

.zdll-logo--letter b {
    font-size: calc(var(--zdll-logo) * var(--zdll-letter-k));
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.zdll--zoom a.zdll-card:hover .zdll-logo {
    transform: scale(1.07);
}

.zdll--gray .zdll-logo img {
    filter: grayscale(1);
    opacity: .75;
}

.zdll--gray a.zdll-card:hover .zdll-logo img {
    filter: none;
    opacity: 1;
}

/* ---------- nombre ---------- */
.zdll .zdll-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--zdll-name);
    font-size: clamp(16px, 1.6vw, 21px);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.zdll a.zdll-card:hover .zdll-name {
    color: var(--zdll-name-h);
}

.zdll--column .zdll-name {
    flex: 0 0 auto;
}

/* ---------- flecha ---------- */
.zdll-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zdll-arrow);
    font-size: var(--zdll-arrow-s);
    line-height: 1;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), color .2s ease, background-color .2s ease;
}

.zdll-arrow svg { display: block; }
.zdll-ico-arrow { display: none !important; }
.zdll--arrow-arrow .zdll-ico-arrow { display: block !important; }
.zdll--arrow-arrow .zdll-ico-chevron { display: none !important; }
.zdll--arrow-none .zdll-arrow { display: none; }

.zdll--arrow-circle .zdll-arrow {
    width: calc(var(--zdll-arrow-s) * 1.9);
    height: calc(var(--zdll-arrow-s) * 1.9);
    border-radius: 50%;
    background: var(--zdll-letter-bg);
}

.zdll a.zdll-card:hover .zdll-arrow {
    color: var(--zdll-arrow-h);
}

.zdll--amove a.zdll-card:hover .zdll-arrow {
    transform: translateX(4px);
}

.zdll--column .zdll-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: calc(var(--zdll-arrow-s) * .85);
}

/* ---------- editor ---------- */
.zdll-note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    color: #b42318;
    font-size: 11px;
    line-height: 1.2;
}

.zdll-empty {
    padding: 22px;
    border: 2px dashed #c8cfdd;
    border-radius: 12px;
    color: #556;
    font-size: 14px;
    text-align: center;
}

/* ---------- fila deslizable en el celular ---------- */
@media (max-width: 767px) {
    .zdll--mscroll .zdll-grid {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 4px 2px 10px;
        margin: -4px -2px 0;
        -webkit-overflow-scrolling: touch;
    }

    .zdll--mscroll .zdll-grid::-webkit-scrollbar { display: none; }

    .zdll--mscroll .zdll-item {
        flex: 0 0 var(--zdll-mw);
        scroll-snap-align: start;
    }
}

/* ---------- efecto al aparecer (solo si el JS está activo) ---------- */
.zdll-ready[class*="zdll-appear-"] .zdll-item {
    opacity: 0;
    transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(min(var(--zdll-i, 0), 12) * 60ms);
}

.zdll-ready.zdll-appear-fade-up .zdll-item { transform: translateY(18px); }
.zdll-ready.zdll-appear-zoom .zdll-item { transform: scale(.94); }

.zdll-ready.is-in[class*="zdll-appear-"] .zdll-item {
    opacity: 1;
    transform: none;
}

.zdll-ready.zdll--baranim .zdll-bars i {
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1) .15s;
}

.zdll-ready.zdll--baranim .zdll-bars i + i {
    transition-delay: .35s;
}

.zdll-ready.zdll--baranim.is-in .zdll-bars i {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .zdll-ready .zdll-item,
    .zdll-ready .zdll-bars i,
    .zdll .zdll-card,
    .zdll-logo,
    .zdll-arrow {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}