/* ZamBrand — Portafolio. Usa las variables del kit (con respaldo si no existen). */
.zbp{--zbp-z:var(--z,#7756ff);--zbp-zl:var(--zl,#9b80ff);--zbp-zg:var(--zg,rgba(119,86,255,.28));--zbp-crd:var(--crd,#0f0f1c);--zbp-crd2:var(--crd2,#131325);--zbp-bdr:var(--bdr,rgba(119,86,255,.13));--zbp-bdhi:var(--bdhi,rgba(119,86,255,.38));--zbp-wht:var(--wht,#eeeeff);--zbp-wht2:var(--wht2,#aaaac8);--zbp-gry:var(--gry,#606088);--zbp-disp:var(--disp,'Syne',sans-serif);--zbp-body:var(--body,'DM Sans',sans-serif);font-family:var(--zbp-body);color:var(--zbp-wht2)}
.zbp *,.zbp *::before,.zbp *::after{box-sizing:border-box}

/* Filtros */
.zbp-filt{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 3rem}
.zbp-filt button{background:transparent;border:1px solid var(--zbp-bdr);color:var(--zbp-gry);font-family:var(--zbp-disp);font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45rem 1.1rem;border-radius:100px;line-height:1.4;transition:all .2s}
.zbp-filt button:hover,.zbp-filt button:focus-visible{border-color:var(--zbp-bdhi);color:var(--zbp-wht);background:transparent}
.zbp-filt button.on{background:var(--zbp-z);border-color:var(--zbp-z);color:#fff}

/* Rejilla y tarjetas */
.zbp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.zbp-card{display:flex;flex-direction:column;background:var(--zbp-crd);border:1px solid var(--zbp-bdr);border-radius:14px;overflow:hidden;transition:border-color .25s,box-shadow .3s}
.zbp-card:hover{border-color:var(--zbp-bdhi);box-shadow:0 16px 50px rgba(0,0,0,.5)}
.zbp-card.zbp-off{display:none}
.zbp-dest{grid-column:1/-1;border-radius:20px}

/* Carrusel */
.zbp-car{position:relative;aspect-ratio:4/3;background:var(--zbp-crd2);overflow:hidden}
.zbp-dest .zbp-car{aspect-ratio:16/9}
.zbp-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:0}
.zbp-track::-webkit-scrollbar{display:none}
.zbp-track:focus-visible{box-shadow:inset 0 0 0 2px var(--zbp-z)}
.zbp-track.zbp-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.zbp-slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.zbp-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.zbp-ph{display:flex;align-items:center;justify-content:center;font-family:var(--zbp-disp);font-weight:800;font-size:1.6rem;color:var(--zbp-gry);background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--zbp-z) 18%,transparent),transparent 60%),var(--zbp-crd2)}
.zbp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(6,6,15,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:1.6rem;line-height:38px;text-align:center;opacity:0;transition:opacity .25s,background .2s,border-color .2s}
.zbp-prev{left:1rem}.zbp-next{right:1rem}
.zbp-car:hover .zbp-nav,.zbp-nav:focus-visible{opacity:1}
.zbp-nav:hover,.zbp-nav:focus-visible{background:var(--zbp-z);border-color:var(--zbp-z);color:#fff}
@media(hover:none){.zbp-nav{opacity:1;width:36px;height:36px;line-height:32px;font-size:1.35rem}}
.zbp-dots{position:absolute;left:0;right:0;bottom:1rem;z-index:3;display:flex;justify-content:center;gap:.4rem;pointer-events:none}
.zbp-dots button{pointer-events:auto;width:8px;height:8px;min-height:0;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.zbp-dots button:hover{background:rgba(255,255,255,.7)}
.zbp-dots button[aria-current]{width:24px;background:var(--zbp-z)}
.zbp-count{position:absolute;right:1rem;top:1rem;z-index:3;font-family:var(--zbp-disp);font-size:.68rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.75);background:rgba(6,6,15,.55);padding:.25rem .6rem;border-radius:100px}
.zbp-count b{color:#fff}
.zbp-badge{position:absolute;left:1rem;top:1rem;z-index:3;font-family:var(--zbp-body);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .7rem;border-radius:100px;background:var(--zbp-z);color:#fff;border:1px solid transparent}
.zbp-badge-azul{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.zbp-badge-dorado{background:linear-gradient(135deg,#b8962e,#e8c97a);color:#0a0800}
.zbp-badge-fantasma{background:rgba(6,6,15,.55);border-color:rgba(255,255,255,.2)}

/* Texto */
.zbp-body{display:flex;flex-direction:column;padding:2rem;flex:1}
.zbp-dest .zbp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:4rem;align-content:start;padding:3rem}
.zbp-dest .zbp-body>*{grid-column:1}
.zbp-dest .zbp-desc{grid-column:2;grid-row:1/span 6;margin:0}
.zbp-num{font-family:var(--zbp-disp);font-size:4rem;font-weight:800;line-height:1;color:color-mix(in srgb,var(--zbp-z) 20%,transparent);margin-bottom:-.3rem}
.zbp-kick{margin:0 0 .4rem;font-family:var(--zbp-disp);font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zbp-zl)}
.zbp .zbp-title{margin:0 0 .3rem;font-family:var(--zbp-disp);font-size:1.3rem;font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--zbp-wht)}
.zbp-dest .zbp-title{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.04em;margin-bottom:.5rem}
.zbp-loc{margin:0 0 .9rem;font-size:.72rem;line-height:1.4;color:var(--zbp-gry)}
.zbp-desc{font-size:.86rem;line-height:1.7;font-weight:300;color:var(--zbp-wht2);margin-bottom:1.2rem}
.zbp-dest .zbp-desc{font-size:.93rem;line-height:1.78}
.zbp-desc p{margin:0 0 .9em}.zbp-desc p:last-child{margin:0}
.zbp-desc strong{color:var(--zbp-wht);font-weight:500}
.zbp-desc a{color:var(--zbp-zl)}
.zbp-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem}
.zbp-tags span{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .6rem;border-radius:100px;border:1px solid var(--zbp-bdr);background:color-mix(in srgb,var(--zbp-z) 6%,transparent);color:var(--zbp-zl)}
.zbp-dels-t{margin:0 0 .8rem;font-family:var(--zbp-disp);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--zbp-gry)}
.zbp-dels{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.8rem;padding:0;list-style:none}
.zbp-dels li{margin:0;font-size:.78rem;color:var(--zbp-wht2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:.3rem .8rem}
.zbp-dels li::before{content:'✓';color:var(--zbp-z);font-size:.7rem;font-weight:700;margin-right:.35rem}
.zbp-ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto}

/* Botones */
.zbp-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--zbp-disp);font-size:.8rem;font-weight:700;letter-spacing:.02em;line-height:1.3;padding:.8rem 1.4rem;border-radius:6px;border:1px solid transparent;text-decoration:none;text-align:center;transition:all .25s}
.zbp a.zbp-btn-p{background:var(--zbp-z);color:#fff}
.zbp a.zbp-btn-p:hover,.zbp a.zbp-btn-p:focus-visible{background:var(--zbp-zl);color:#fff;transform:translateY(-2px);box-shadow:0 8px 28px var(--zbp-zg)}
.zbp a.zbp-btn-o{background:transparent;color:var(--zbp-wht);border-color:rgba(255,255,255,.17)}
.zbp a.zbp-btn-o:hover,.zbp a.zbp-btn-o:focus-visible{color:var(--zbp-z);border-color:var(--zbp-z)}
.zbp-more{margin-top:3rem;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.zbp-more p{margin:0;font-size:.95rem;color:var(--zbp-wht2)}
.zbp-empty{padding:2rem;border:1px dashed var(--zbp-bdhi,#999);border-radius:12px}

@media(max-width:900px){
  .zbp-grid{grid-template-columns:1fr}
  .zbp-dest .zbp-car{aspect-ratio:4/3}
  .zbp-dest .zbp-body{display:flex;padding:2rem}
  .zbp-dest .zbp-desc{margin-bottom:1.2rem}
}
@media(max-width:600px){
  .zbp-body,.zbp-dest .zbp-body{padding:1.5rem}
  .zbp-ctas .zbp-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.zbp-track{scroll-behavior:auto}.zbp-btn{transition:none}}
.zbp-btn img.emoji{margin:0 .4em 0 0!important}

/* Vista del inicio [zb_portafolio vista="inicio" limite="3"]: tarjeta clara con portada y foto alterna al pasar el mouse */
.zbp-inicio{color:#474d68}
.zbp-igrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.zbp-icard{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e6f3;border-radius:14px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.zbp-icard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,15,37,.1);border-color:var(--zbp-z)}
.zbp-i-vis{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0f25}
.zbp-i-vis img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block;transition:opacity .6s,transform .8s}
.zbp-i-vis .zbp-i-alt{opacity:0;transform:scale(1.04)}
.zbp-icard:hover .zbp-i-alt{opacity:1;transform:scale(1)}
.zbp-icard:hover .zbp-i-main{transform:scale(1.04)}
.zbp-i-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--zbp-disp);font-weight:800;font-size:1.6rem;color:#fff}
.zbp-i-badge{position:absolute;left:1rem;top:1rem;z-index:2;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .75rem;border-radius:100px;background:rgba(6,6,15,.6);border:1px solid rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.zbp-i-body{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:1.5rem;flex:1}
.zbp .zbp-i-title{margin:0;font-family:var(--zbp-disp);font-size:1.375rem;font-weight:700;line-height:1.2;color:#0b0f25}
.zbp-i-txt{margin:0;font-size:1rem;line-height:1.55;color:#474d68}
.zbp-i-chip{font-size:.8125rem;font-weight:500;line-height:1.4;padding:.375rem .75rem;border-radius:100px;background:color-mix(in srgb,var(--zbp-z) 8%,transparent);color:var(--zbp-z)}
.zbp a.zbp-i-btn{margin-top:auto;display:inline-flex;align-items:center;font-family:var(--zbp-disp);font-size:.9375rem;font-weight:700;line-height:1.2;padding:.9rem 1.6rem;border-radius:8px;border:1px solid var(--zbp-z);color:var(--zbp-z);text-decoration:none;transition:background .25s,color .25s}
.zbp a.zbp-i-btn:hover,.zbp a.zbp-i-btn:focus-visible{background:var(--zbp-z);color:#fff}
@media(max-width:900px){.zbp-igrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.zbp-icard,.zbp-i-vis img{transition:none}}