/* =========================================
   Vendedores Autorizados - Liquid Glass Pro v2
   - Fondo premium
   - Zona como cinta azul (centro abajo del carnet)
   - Sin buscador
   - Hover: tilt + spotlight + shimmer (con JS)
   ========================================= */

body.vz-page,
body.vz-page #page,
body.vz-page .site,
body.vz-page .site-content,
body.vz-page #site-content,
body.vz-page .content-area,
body.vz-page main{
  min-height: 100vh;
  background-color: #ffffff;
}

body.vz-page .vz-hero{
  border-bottom: none !important;
  box-shadow: none !important;
}

body.vz-page .vz-hero::after,
body.vz-page .vz-hero::before{
  display: none !important;
}

.vz-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:34px 16px 70px;
  position:relative;
}


.vz-hero{margin-bottom:16px}
.vz-title{
  color: #072074;
  font-size:clamp(28px,3.0vw,46px);
  line-height:1.05;
  margin:0 0 10px;
  letter-spacing:-.02em
}
.vz-subtitle{margin:0 0 14px;opacity:.75;max-width:70ch}

.vz-controls{display:flex;align-items:center}
.vz-filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.vz-pill{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:9px 12px;border-radius:999px;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  font-weight:850;font-size:13px
}
.vz-pill:hover{transform:translateY(-1px)}
.vz-pill.active{background:rgba(0,0,0,.92);color:#fff;border-color:rgba(0,0,0,.92)}

.vz-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}

/* ====== Liquid glass card ====== */
.vz-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;

  background: linear-gradient(135deg, rgba(255,255,255,.64), rgba(255,255,255,.42));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.55);

  box-shadow:
    0 18px 44px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55);

  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* overlay suave */
.vz-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.45;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%),
    radial-gradient(500px 220px at 100% 0%, rgba(0,0,0,.10), transparent 55%);
  mix-blend-mode: soft-light;
}

/* Spotlight que sigue el mouse */
.vz-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
  background:
    radial-gradient(760px 260px at var(--spx, 50%) var(--spy, 20%),
      rgba(255,255,255,.65),
      rgba(255,255,255,.14) 35%,
      transparent 65%);
}

.vz-card.is-hover::before{opacity:1}

/* Hover: tilt + lift */
.vz-card.is-hover{
  transform: translateY(calc(var(--lift, 0px) * -1))
             rotateX(var(--tiltX, 0deg))
             rotateY(var(--tiltY, 0deg));
  box-shadow:
    0 28px 74px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.60);
  border-color: rgba(255,255,255,.75);
}

/* Shimmer que corre por el carnet al hover */
.vz-card.is-hover .vz-carnet::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,.10) 55%,
    transparent 65%);
  transform: translateX(-55%) rotate(12deg);
  animation: vzShimmer 1.15s ease;
  pointer-events:none;
  opacity:.9;
}

@keyframes vzShimmer{
  from{transform: translateX(-55%) rotate(12deg)}
  to{transform: translateX(55%) rotate(12deg)}
}

/* ====== Carnet wrapper + cinta ====== */
.vz-media{
  display:block;
  padding:12px;
  aspect-ratio: 827 / 1181;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vz-carnet{
  position:relative;
  width:100%;
  height:98%;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.04);
}

.vz-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform: translateZ(20px);
  transition: transform .22s ease, filter .22s ease;
}

.vz-card.is-hover .vz-img{
  transform: translateY(-3px) scale(1.006) translateZ(20px);
  filter: saturate(1.05) contrast(1.04);
}

/* Cinta azul centrada abajo */
.vz-zona-ribbon{
  position:absolute;
  left:50%;
  bottom:5px;
  transform: translateX(-50%);
  padding:10px 16px;
  border-radius:999px;
  font-weight:950;
  font-size:13px;
  letter-spacing:.01em;

  color:#fff;
  background: linear-gradient(180deg, rgba(0,98,185,.98), rgba(0,76,150,.98));
  box-shadow: 0 16px 34px rgba(0,0,0,.18);

  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ====== Body ====== */
.vz-body{
  padding:0px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* CTA */
.vz-btn{
  display:inline-block;
  text-align:center;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:950;
  border: 1px solid rgba(255,255,255,.50);
  background: rgba(10,10,10,.92);
  color:#fff;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.vz-btn:hover{
  transform: translateY(-1px);
  opacity:.97;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

/* ====== Motion safe ====== */
@media (prefers-reduced-motion: reduce){
  .vz-card, .vz-img, .vz-btn, .vz-pill{transition:none}
  .vz-card.is-hover{transform:none}
  .vz-card.is-hover::before{opacity:0}
  .vz-card.is-hover .vz-img{transform:none}
  .vz-card.is-hover .vz-carnet::before{display:none}
}

/* ====== Responsive ====== */
@media (max-width: 520px){
  .vz-wrap{padding:20px 12px 56px}
  .vz-grid{grid-template-columns:1fr}
  .vz-filters{margin-left:0}
  .vz-zona-ribbon{bottom:12px}
}