.zf-nvc-wrap{
  --zf-accent:#0b5ed7;
  --zf-bg:#fff;
  --zf-card-bg:#fff;
  width:100%;
  background:var(--zf-bg);
  padding:8px 0 18px;
}

.zf-nvc-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  width:100%;
}

.zf-nvc-slot{
  min-width:0;
  perspective:1200px;
  aspect-ratio:0.73;
}

.zf-nvc-flipper{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .78s cubic-bezier(.22,.72,.18,1);
  will-change:transform;
}

.zf-nvc-slot.is-flipped .zf-nvc-flipper{transform:rotateY(180deg)}

.zf-nvc-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--zf-card-bg);
  border:1px solid rgba(12,35,67,.11);
  border-radius:18px;
  box-shadow:0 9px 26px rgba(8,29,58,.11);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}

.zf-nvc-front{transform:rotateY(0deg)}
.zf-nvc-back{transform:rotateY(180deg)}

/* Filete decorativo azul fino */
.zf-nvc-face::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid color-mix(in srgb,var(--zf-accent) 62%,transparent);
  border-radius:14px;
  pointer-events:none;
  z-index:3;
}

.zf-nvc-face::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-90%;
  width:55%;
  height:190%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.62) 48%,transparent 100%);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
  z-index:4;
}

.zf-nvc-slot.is-flipping .zf-nvc-face::after{
  animation:zfNvcShine .78s ease both;
}

@keyframes zfNvcShine{
  0%{left:-90%;opacity:0}
  25%{opacity:.72}
  100%{left:145%;opacity:0}
}

.zf-nvc-image{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  background:#fff;
  overflow:hidden;
  z-index:1;
}

.zf-nvc-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .3s ease;
  -webkit-user-drag:none;
  user-select:none;
}

.zf-nvc-slot:hover .zf-nvc-image img{transform:scale(1.035)}

.zf-nvc-body{
  position:relative;
  z-index:2;
  padding:12px 12px 14px;
  text-align:center;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.zf-nvc-name{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.3;
  font-weight:650;
  min-height:39px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.zf-nvc-name a{color:inherit;text-decoration:none}

.zf-nvc-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin-top:auto;
  padding:9px 15px;
  border-radius:999px;
  background:var(--zf-accent);
  color:#fff!important;
  text-decoration:none!important;
  font-size:13px;
  font-weight:700;
  box-shadow:0 5px 14px rgba(11,94,215,.18);
  transition:.2s ease;
}

.zf-nvc-button:hover{transform:translateY(-1px);filter:brightness(.95)}

@media(max-width:1024px){
  .zf-nvc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .zf-nvc-slot:nth-child(n+4){display:none}
}

@media(max-width:767px){
  .zf-nvc-wrap{padding:6px 0 14px}
  .zf-nvc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .zf-nvc-slot{aspect-ratio:0.72}
  .zf-nvc-slot:nth-child(n+3){display:none}
  .zf-nvc-face{border-radius:14px}
  .zf-nvc-face::before{inset:4px;border-radius:11px}
  .zf-nvc-body{padding:9px 7px 10px}
  .zf-nvc-name{font-size:12px;line-height:1.25;min-height:45px;margin-bottom:7px}
  .zf-nvc-button{font-size:11px;padding:7px 9px;min-height:32px}
}

@media (prefers-reduced-motion: reduce){
  .zf-nvc-flipper{transition-duration:.01ms}
  .zf-nvc-slot.is-flipping .zf-nvc-face::after{animation:none}
}