/* ═══ VITRINA PÚBLICA — sólo lo que NO está ya en inteligencia-presencia.css ═══
   Comparte tokens, tipografía, textura y componentes con la pantalla del cliente
   a propósito: el prospecto tiene que reconocer el producto cuando lo compre. */

.v-shell{grid-template-columns:minmax(0,1fr) !important;max-width:1280px}
.v-shell.con-evid{grid-template-columns:minmax(0,1fr) 372px !important}
.v-hero{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}
.v-hero-nota{margin-top:14px;font-size:13px;color:var(--dim);border-left:2px solid var(--line2);padding-left:12px}
.v-volver{display:inline-block;margin-bottom:16px}

/* filtros por categoría */
.v-filtros{display:flex;gap:6px;flex-wrap:wrap}
.v-filtros button{all:unset;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut);transition:.15s}
.v-filtros button:hover{background:var(--hover)}
.v-filtros button[aria-pressed=true]{color:var(--cy);border-color:var(--line2);background:var(--panel)}

/* rejilla de perfiles */
.v-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.v-perfil{all:unset;cursor:pointer;display:block;border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  background:var(--panel);backdrop-filter:blur(8px);transition:.16s}
.v-perfil:hover{border-color:var(--line2);transform:translateY(-1px)}
.v-perfil:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.v-perfil-h{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.v-perfil-h b{font-size:14.5px;font-weight:600;line-height:1.25}
.v-cat{font-family:var(--mono);font-size:8px;letter-spacing:.14em;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line2);color:var(--dim);white-space:nowrap;margin-left:auto}
.v-cat[data-c="empresa"]{color:var(--az)}
.v-cat[data-c="politico"]{color:var(--vi)}
.v-cat[data-c="empresario"]{color:var(--cy)}
.v-perfil-m{display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:var(--mut)}
.v-perfil-m b{color:var(--tx);font-size:15px;font-weight:500;display:block}
.v-perfil-m span{font-size:8.5px;letter-spacing:.12em;color:var(--dim)}
.v-mudo{opacity:.62}
.v-mudo .v-silencio{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim)}

/* ficha */
.v-ficha-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.v-ficha-h h1{font-size:clamp(23px,3vw,33px);font-weight:600;letter-spacing:-.015em}
.v-perimetro-caja{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--bg2);margin:16px 0}
.v-perimetro-caja .ip-kick{display:block;margin-bottom:8px}
.v-perimetro-caja code{font-family:var(--mono);font-size:11px;color:var(--mut)}

/* bloque legal */
.v-legal{margin-top:46px;padding:24px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.v-legal h3{font-size:12px;font-family:var(--mono);letter-spacing:.13em;color:var(--cy);margin:14px 0 6px;text-transform:uppercase}
.v-legal h3:first-child{margin-top:0}
.v-legal p{font-size:12.5px;color:var(--mut);max-width:88ch;line-height:1.6}
.v-legal-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
  border-top:1px solid var(--line);padding-top:16px}
.v-legal-cta span{font-size:11.5px;color:var(--dim)}

/* muro */
.v-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px)}
.v-modal-card{position:relative;width:min(480px,100%);max-height:90vh;overflow-y:auto;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:30px 28px}
.v-modal-x{position:absolute;top:14px;right:14px}
.v-modal-card h3{font-size:21px;font-weight:600;margin:8px 0 10px}
.v-modal-card > p{font-size:13.5px;color:var(--mut);margin-bottom:20px}
.v-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.v-form-msg{font-size:12.5px;margin-top:12px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--line2);background:var(--bg2)}
.v-form-msg.ok{color:var(--gr);border-color:color-mix(in srgb,var(--gr) 45%,transparent)}
.v-form-msg.err{color:var(--rd);border-color:color-mix(in srgb,var(--rd) 45%,transparent)}
.v-form-pie{font-size:11px;color:var(--dim);margin-top:12px}
#v-form .ip-btn{width:100%;text-align:center;margin-top:6px}

@media (max-width:860px){
  .v-shell.con-evid{grid-template-columns:1fr !important}
  .v-hero{grid-template-columns:1fr}
}