/* PLAZUNI · la plaza de San Martín (jagzon.html + jagzon.ts).
Identidad propia: verde selva, orquídea (Moyobamba, ciudad de las
orquídeas) y achiote; Unbounded para la marca y los títulos, la letra del
sistema para leer. Celular primero; en computadora, menú a la izquierda,
la plaza al centro y videos y preguntas a la derecha. */
@font-face {
font-family: "Unbounded";
src: url("/static/cliente/fonts/unbounded.woff2") format("woff2");
font-weight: 200 900;
font-display: swap;
}
:root {
--selva: #0e3b2e;
--selva-2: #0a2a20;
--hoja: #12805c;
--orquidea: #c2367a;
--orquidea-hondo: #9e2a62;
--orquidea-claro: #f7b6d6;
--achiote: #d6402a;
--fondo: #eef2ec;
--suave: #f3f6f1;
--linea: #dfe4dc;
--tinta: #1a1a17;
--gris: #5f5e57;
--abierto: #1d7a4c;
--marca: "Unbounded", system-ui, sans-serif;
--texto: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--sombra: 0 1px 2px rgb(14 59 46 / 6%), 0 8px 24px rgb(14 59 46 / 7%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.jz { margin: 0; min-height: 100vh; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 15px; line-height: 1.45; }
.jz a { color: inherit; }
.jz button, .jz input, .jz select, .jz textarea { font: inherit; color: inherit; }
.jz svg { flex: none; }
.jz-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jz-saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: 10px; background: #fff; }
.jz-saltar:focus { left: 8px; }
.jz :focus-visible { outline: 2px solid rgb(14 59 46 / 45%); outline-offset: 2px; }
/* ---------- Barra de arriba ---------- */
.jz-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--selva); color: #fff; }
.jz-logo { font-family: var(--marca); font-weight: 800; font-size: 23px; letter-spacing: -.03em; text-decoration: none; color: #fff !important; }
.jz-logo span { color: var(--orquidea-claro); }
.jz-ciudad select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 18px; background: rgb(255 255 255 / 14%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.jz-ciudad select option { color: var(--tinta); }
.jz-barra__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.jz-yo { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 13px; background: rgb(255 255 255 / 18%); color: #fff !important; font-weight: 800; font-size: 14px; text-decoration: none; }
.jz-yo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Botones ---------- */
.jz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.jz-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jz-btn:disabled { opacity: .55; cursor: default; }
.jz-btn--orquidea { border-color: transparent; background: var(--orquidea); color: #fff !important; }
.jz-btn--orquidea:hover { background: var(--orquidea-hondo); }
.jz-btn--selva { border-color: transparent; background: var(--selva); color: #fff !important; }
.jz-btn--suave { border-color: transparent; background: var(--suave); }
.jz-btn.es-on { border-color: var(--achiote); background: #fde8e4; color: var(--achiote); }
.jz-btn.es-on svg { fill: currentColor; }
.jz-btn--orquidea svg[viewBox="0 0 48 48"], .jz-menu__crear svg { stroke-width: 6; }
.jz-icono { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 14px; background: var(--suave); cursor: pointer; }
.jz-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
/* ---------- Marco y menú ---------- */
.jz-marco { padding-bottom: 104px; }
.jz-main { min-width: 0; outline: none; }
.jz-solo-pc { display: none !important; }
.jz-menu { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); height: 66px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; border-radius: 24px; background: var(--selva); box-shadow: 0 10px 30px rgb(14 59 46 / 30%); }
.jz-menu a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: rgb(255 255 255 / 72%); font-size: 11px; font-weight: 600; text-decoration: none; }
.jz-menu a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jz-menu a[aria-current="page"] { color: #fff; font-weight: 800; }
.jz-menu a[aria-current="page"] svg { fill: currentColor; }
.jz-menu a[aria-current="page"] svg path[d^="M10.5"] { fill: var(--selva); stroke: none; }
.jz-menu__crear span { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -28px; border-radius: 18px; background: var(--orquidea); transform: rotate(-6deg); box-shadow: 0 6px 16px rgb(194 54 122 / 45%); }
.jz-menu__crear svg { width: 26px !important; height: 26px !important; stroke: #fff !important; fill: none !important; }
/* ---------- Plaza ---------- */
.jz-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 4px; scrollbar-width: none; }
.jz-chips::-webkit-scrollbar { display: none; }
.jz-chip { flex: none; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.jz-chip[aria-pressed="true"] { border-color: var(--selva); background: var(--selva); color: #fff; }
.jz-seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 16px 10px; }
.jz-seccion-titulo h2 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.jz-seccion-titulo a { font-weight: 700; font-size: 13.5px; color: var(--hoja); text-decoration: none; }
.jz-nuevos { display: flex; gap: 14px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; }
.jz-nuevos::-webkit-scrollbar { display: none; }
.jz-nuevo { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; font-size: 12px; font-weight: 600; }
.jz-nuevo span:last-child { max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-nuevo__foto { position: relative; width: 64px; height: 64px; padding: 3px; border-radius: 22px; background: var(--orquidea); }
.jz-nuevo__foto img, .jz-nuevo__foto b { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid var(--fondo); border-radius: 19px; object-fit: cover; background: #fff; font-size: 18px; }
.jz-nuevo__foto i { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border: 3px solid var(--fondo); border-radius: 50%; background: #2fbf71; }
.jz-escribir { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 12px 14px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--sombra); width: calc(100% - 24px); text-align: left; cursor: pointer; }
.jz-escribir span:nth-child(2) { flex: 1; color: var(--gris); font-size: 15px; }
.jz-lista { display: grid; gap: 12px; padding: 12px; }
.jz-vacio { margin: 24px 16px; padding: 22px; border-radius: 22px; background: #fff; color: var(--gris); text-align: center; }
.jz-vacio b { display: block; margin-bottom: 6px; color: var(--tinta); font-family: var(--marca); font-weight: 600; font-size: 16px; }
.jz-mas { display: block; margin: 4px auto 16px; }
.jz-cargando { padding: 30px; color: var(--gris); text-align: center; }
/* Avatares: negocios cuadrados redondeados, personas redondas. */
.jz-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 14px; background: var(--selva); color: #fff; font-weight: 800; font-size: 13px; }
.jz-av img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.jz-av--persona { border-radius: 50%; background: #e7d8b8; color: var(--tinta); }
.jz-av--chico { width: 32px; height: 32px; border-radius: 11px; font-size: 11.5px; }
.jz-av--chico.jz-av--persona { border-radius: 50%; }
/* ---------- Tarjeta de publicación ---------- */
.jz-card { overflow: hidden; border-radius: 26px; background: #fff; box-shadow: var(--sombra); scroll-margin-top: 70px; }
.jz-card__cab { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; }
.jz-card__quien { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.jz-card__quien b { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-card__quien small { color: var(--gris); font-size: 12.5px; }
.jz-sello { width: 16px; height: 16px; }
.jz-sello circle { fill: var(--orquidea); }
.jz-sello path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.jz-estado { color: var(--abierto); font-weight: 700; }
.jz-estado.es-cerrado { color: #a33a26; }
.jz-menu-card { position: relative; }
.jz-menu-card summary { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; list-style: none; cursor: pointer; color: var(--gris); }
.jz-menu-card summary::-webkit-details-marker { display: none; }
.jz-menu-card summary svg { width: 20px; height: 20px; fill: currentColor; }
.jz-menu-card__caja { position: absolute; right: 0; top: 40px; z-index: 5; display: grid; min-width: 190px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgb(0 0 0 / 16%); }
.jz-menu-card__caja button { padding: 10px 12px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.jz-menu-card__caja button:hover { background: var(--suave); }
.jz-card__texto { margin: 10px 14px 0; font-size: 15.5px; white-space: pre-line; overflow-wrap: anywhere; }
.jz-card__texto a { color: var(--hoja); }
/* Foto primero: el negocio encima con su estado y el precio grande. */
.jz-foto { position: relative; margin-top: 12px; background: #f4f5f2; }
.jz-foto--primero { margin-top: 0; }
.jz-fotos { display: grid; gap: 3px; }
.jz-fotos--2, .jz-fotos--4 { grid-template-columns: 1fr 1fr; }
.jz-fotos--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.jz-fotos--3 a:first-child { grid-row: span 2; }
.jz-fotos a { position: relative; display: block; background: #f4f5f2; }
.jz-fotos img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: contain; }
.jz-fotos--2 img, .jz-fotos--3 img, .jz-fotos--4 img { aspect-ratio: 1 / 1; object-fit: cover; }
.jz-fotos__mas { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 45%); color: #fff; font-size: 26px; font-weight: 800; }
.jz-foto__negocio { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 5px 12px 5px 5px; border-radius: 999px; background: rgb(255 255 255 / 95%); text-decoration: none; box-shadow: 0 2px 8px rgb(0 0 0 / 8%); }
.jz-foto__negocio span { display: grid; min-width: 0; line-height: 1.15; }
.jz-foto__negocio b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-foto__negocio small { font-size: 11.5px; }
.jz-precio { position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; border-radius: 12px; background: var(--selva); color: #fff; font-weight: 800; font-size: 15px; }
.jz-producto { display: flex; align-items: center; gap: 10px; margin: 12px 14px 0; padding: 8px; border-radius: 16px; background: var(--suave); text-decoration: none; }
.jz-producto img { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; }
.jz-producto span { display: grid; min-width: 0; }
.jz-producto b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-producto small { color: var(--gris); font-size: 13px; }
.jz-card__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px 14px; }
.jz-card__pie .jz-pedir { margin-left: auto; }
/* Video en la plaza: miniatura con ▶ que lleva a «Ver». */
.jz-video-mini { position: relative; display: block; margin-top: 12px; aspect-ratio: 4 / 5; max-height: 560px; overflow: hidden; background: var(--selva); }
.jz-video-mini img { width: 100%; height: 100%; object-fit: cover; }
.jz-video-mini span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: rgb(14 59 46 / 85%); transform: translate(-50%, -50%); }
.jz-video-mini svg { width: 26px; height: 26px; fill: #fff; }
/* Pregunta a la plaza */
.jz-pregunta { display: grid; gap: 12px; padding: 16px; }
.jz-pregunta__cab { display: flex; align-items: center; gap: 10px; }
.jz-pregunta__signo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--achiote); color: #fff; font-family: var(--marca); font-weight: 800; font-size: 18px; }
.jz-pregunta__cab span { display: grid; }
.jz-pregunta__cab b { color: var(--achiote); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.jz-pregunta__cab small { color: var(--gris); font-size: 13px; }
.jz-pregunta__texto { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.jz-respuestas { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: var(--suave); text-decoration: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.jz-respuestas__logos { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.jz-respuestas__logos > span { display: flex; }
.jz-respuestas__logos .jz-av { border: 2px solid var(--suave); }
.jz-respuestas__logos .jz-av + .jz-av { margin-left: -8px; }
.jz-respuestas p { margin: 0; font-size: 14px; }
/* ---------- Ver ---------- */
.jz-ver { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--selva); color: #fff; }
.jz-ver__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; }
.jz-ver__cab .jz-icono { background: rgb(255 255 255 / 12%); color: #fff; }
.jz-ver__pestanas { display: flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 12%); }
.jz-ver__pestanas button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.jz-ver__pestanas button[aria-pressed="true"] { background: #fff; color: var(--selva); }
.jz-ver__rollo { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding-bottom: 90px; }
.jz-ver__rollo::-webkit-scrollbar { display: none; }
.jz-clip { position: relative; height: calc(100vh - 160px); height: calc(100dvh - 160px); margin: 0 10px 10px; overflow: hidden; border-radius: 30px; background: #000; scroll-snap-align: start; }
.jz-clip video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.jz-clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 40%) 0%, transparent 24%, transparent 46%, rgb(0 0 0 / 78%) 100%); }
.jz-clip > *:not(video) { z-index: 2; }
.jz-clip__barra { position: absolute; top: 12px; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 35%); }
.jz-clip__barra i { display: block; width: 0; height: 100%; border-radius: 2px; background: #fff; }
.jz-clip__negocio { position: absolute; top: 26px; left: 14px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff !important; }
.jz-clip__negocio .jz-av { border: 2px solid #fff; }
.jz-clip__negocio span { display: grid; line-height: 1.15; }
.jz-clip__negocio small { color: #b8f0cf; font-size: 12px; font-weight: 700; }
.jz-clip__seguir { position: absolute; top: 30px; right: 14px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--orquidea); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }
.jz-clip__sonido { position: absolute; top: 70px; right: 14px; }
.jz-clip__sonido .jz-icono { background: rgb(0 0 0 / 35%); color: #fff; }
.jz-clip__texto { position: absolute; left: 16px; right: 16px; bottom: 132px; display: grid; gap: 4px; }
.jz-clip__texto b { font-family: var(--marca); font-weight: 600; font-size: 16px; line-height: 1.3; }
.jz-clip__texto p { margin: 0; font-size: 14px; white-space: pre-line; }
.jz-clip__acciones { position: absolute; left: 12px; right: 12px; bottom: 80px; display: flex; gap: 8px; }
.jz-clip__acciones .jz-btn { border: 0; background: rgb(255 255 255 / 22%); color: #fff; backdrop-filter: blur(8px); }
.jz-clip__acciones .jz-btn.es-on { background: var(--achiote); color: #fff; }
.jz-clip__bandeja { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 22px; background: #fff; color: var(--tinta); }
.jz-clip__bandeja img { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: #f4f5f2; }
.jz-clip__bandeja span { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.jz-clip__bandeja b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-clip__bandeja small { color: var(--gris); font-size: 13px; }
.jz-clip__bandeja .jz-btn { border-radius: 14px; }
.jz-ver .jz-vacio { background: rgb(255 255 255 / 10%); color: #e8efe9; }
.jz-ver .jz-vacio b { color: #fff; }
/* ---------- Página del negocio ---------- */
.jz-negocio { display: grid; gap: 14px; padding: 14px 16px 22px; border-radius: 0 0 30px 30px; background: var(--selva); color: #fff; }
.jz-negocio__estado { justify-self: start; padding: 6px 12px; border-radius: 999px; background: rgb(47 191 113 / 20%); color: #b8f0cf; font-size: 13px; font-weight: 700; }
.jz-negocio__estado.es-cerrado { background: rgb(255 255 255 / 12%); color: #f3d1c9; }
.jz-negocio__id { display: flex; align-items: center; gap: 14px; }
.jz-negocio__id .jz-av { width: 76px; height: 76px; border: 3px solid var(--orquidea); border-radius: 24px; font-family: var(--marca); font-size: 22px; }
.jz-negocio__id h1 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--marca); font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; }
.jz-negocio__id h1 .jz-sello { width: 18px; height: 18px; }
.jz-negocio__id p { margin: 4px 0 0; color: rgb(255 255 255 / 82%); font-size: 13.5px; }
.jz-negocio__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.jz-negocio__cifras span { display: grid; padding: 10px 4px; border-radius: 16px; background: rgb(255 255 255 / 10%); }
.jz-negocio__cifras b { font-size: 17px; }
.jz-negocio__cifras small { color: rgb(255 255 255 / 75%); font-size: 12px; }
.jz-negocio__botones { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.jz-negocio__botones .jz-btn { min-height: 44px; border-radius: 16px; border: 0; font-size: 15px; }
.jz-negocio__botones .jz-btn--blanco { background: #fff; color: var(--selva) !important; }
.jz-negocio__botones .jz-btn--transparente { background: rgb(255 255 255 / 12%); color: #fff !important; }
.jz-pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 16px 0; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgb(14 59 46 / 8%); }
.jz-pestanas button { min-height: 38px; border: 0; border-radius: 999px; background: none; color: var(--gris); font-weight: 700; cursor: pointer; }
.jz-pestanas button[aria-selected="true"] { background: var(--selva); color: #fff; }
.jz-vitrina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.jz-vitrina a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--sombra); text-decoration: none; }
.jz-vitrina img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px 14px 64px; object-fit: contain; }
.jz-vitrina__play { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: rgb(14 59 46 / 85%); }
.jz-vitrina__play svg { width: 12px; height: 12px; fill: #fff; }
.jz-vitrina__etiqueta { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; padding: 8px 10px; border-radius: 14px; background: var(--selva); color: #fff; line-height: 1.2; }
.jz-vitrina__etiqueta b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.jz-vitrina__etiqueta span { color: var(--orquidea-claro); font-size: 13px; font-weight: 800; }
/* ---------- Cerca ---------- */
.jz-mapa { height: 46vh; min-height: 260px; background: #dfe8d9; }
.jz-cerca-lista { display: grid; gap: 10px; margin-top: -24px; padding: 16px 12px; border-radius: 28px 28px 0 0; background: #fff; position: relative; }
.jz-cerca-lista h2 { margin: 4px 4px 4px; font-family: var(--marca); font-weight: 600; font-size: 16px; }
.jz-cerca { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: var(--suave); text-decoration: none; }
.jz-cerca > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jz-cerca b { font-size: 15px; }
.jz-cerca small { color: var(--gris); font-size: 13px; }
.jz-cerca .jz-av { width: 56px; height: 56px; border-radius: 16px; }
/* ---------- Yo ---------- */
.jz-yo-cab { display: flex; align-items: center; gap: 14px; margin: 16px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: var(--sombra); }
.jz-yo-cab .jz-av { width: 64px; height: 64px; font-size: 22px; }
.jz-yo-cab h1 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 18px; }
.jz-yo-cab p { margin: 2px 0 0; color: var(--gris); }
.jz-mis-negocios { display: grid; gap: 8px; margin: 0 16px; }
.jz-mis-negocios a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: #fff; text-decoration: none; font-weight: 700; }
/* ---------- Hoja (crear, comentarios) ---------- */
.jz-hoja { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.jz-hoja[hidden] { display: none; }
.jz-hoja__fondo { position: absolute; inset: 0; background: rgb(10 25 20 / 55%); }
.jz-hoja__caja { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 92vh; border-radius: 28px 28px 0 0; background: #fff; }
.jz-hoja__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.jz-hoja__cab h2 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 17px; }
.jz-hoja__cuerpo { overflow-y: auto; padding: 4px 16px 20px; }
.jz-form { display: grid; gap: 12px; }
.jz-form label { display: grid; gap: 5px; font-weight: 700; font-size: 13.5px; }
.jz-form select, .jz-form textarea, .jz-form input[type="text"] { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; font-size: 16px; font-weight: 400; }
.jz-form textarea { min-height: 110px; resize: vertical; }
.jz-form select:focus, .jz-form textarea:focus { outline: none; border-color: var(--orquidea); box-shadow: 0 0 0 3px rgb(194 54 122 / 18%); }
.jz-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 16px; background: var(--suave); }
.jz-tipos button { min-height: 40px; border: 0; border-radius: 12px; background: none; font-weight: 700; cursor: pointer; }
.jz-tipos button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.jz-previas { display: flex; flex-wrap: wrap; gap: 8px; }
.jz-previas:empty { display: none; }
.jz-previa { position: relative; width: 84px; height: 84px; }
.jz-previa img, .jz-previa video { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; background: #000; }
.jz-previa button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--tinta); color: #fff; cursor: pointer; }
.jz-previa button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.jz-progreso { height: 6px; border-radius: 3px; background: var(--suave); overflow: hidden; }
.jz-progreso i { display: block; height: 100%; width: 0; background: var(--orquidea); transition: width .2s; }
.jz-nota { margin: 0; color: var(--gris); font-size: 13px; }
/* Comentarios */
.jz-comentarios { display: grid; gap: 12px; }
.jz-comentario { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; }
.jz-comentario__burbuja { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 16px; background: var(--suave); }
.jz-comentario.es-negocio .jz-comentario__burbuja { background: #fbe3ef; }
.jz-comentario__burbuja b { display: block; font-size: 13.5px; }
.jz-comentario__burbuja p { margin: 2px 0 0; font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.jz-comentario__pie { grid-column: 2; display: flex; gap: 12px; padding: 3px 12px 0; color: var(--gris); font-size: 12.5px; }
.jz-comentario__pie button { padding: 0; border: 0; background: none; color: var(--gris); font-weight: 700; cursor: pointer; }
.jz-comentar { position: sticky; bottom: 0; display: grid; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linea); background: #fff; }
.jz-comentar__fila { display: flex; gap: 8px; align-items: flex-end; }
.jz-comentar textarea { flex: 1; min-height: 42px; padding: 10px 14px; border: 1.5px solid var(--linea); border-radius: 21px; font-size: 15px; resize: none; }
/* Aviso */
.jz-aviso { position: fixed; left: 50%; bottom: 96px; z-index: 60; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--tinta); color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 25%); transform: translateX(-50%); }
.jz-aviso a { color: var(--orquidea-claro); font-weight: 700; }
/* ---------- Computadora ---------- */
@media (min-width: 1024px) {
.jz-solo-pc { display: inline-flex !important; }
.jz-barra { padding: 12px 24px; }
.jz-logo { font-size: 26px; }
.jz-marco { display: flex; gap: 24px; align-items: flex-start; max-width: 1320px; margin: 0 auto; padding: 20px 20px 40px; }
.jz-menu { position: sticky; top: 84px; left: auto; right: auto; bottom: auto; flex: 0 0 104px; height: auto; display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; box-shadow: none; }
.jz-menu a { flex-direction: column; gap: 6px; min-height: 0; padding: 12px 6px; border-radius: 20px; color: #4a4943; font-size: 13px; font-weight: 700; }
.jz-menu a:hover { background: rgb(14 59 46 / 6%); }
.jz-menu a[aria-current="page"] { background: var(--selva); color: #fff; }
.jz-menu a.jz-menu__crear { display: none; }
.jz-menu__nsm { display: flex !important; }
.jz-main { flex: 999 1 560px; max-width: 640px; }
.jz-lado { position: sticky; top: 84px; flex: 1 1 280px; max-width: 360px; display: flex !important; flex-direction: column; gap: 16px; }
.jz-lado section { padding: 18px; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-lado section.jz-lado__videos { background: var(--selva); color: #fff; }
.jz-lado h2 { margin: 0 0 12px; font-family: var(--marca); font-weight: 600; font-size: 15px; }
.jz-lado__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jz-lado__grilla a { position: relative; display: block; aspect-ratio: 9 / 13; overflow: hidden; border-radius: 18px; background: #f4f5f2; text-decoration: none; }
.jz-lado__grilla img { width: 100%; height: 100%; object-fit: cover; }
.jz-lado__grilla span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; border-radius: 12px; background: rgb(14 59 46 / 88%); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; }
.jz-lado__pregunta { display: grid; gap: 3px; margin-top: 8px; padding: 12px; border-radius: 16px; background: var(--suave); text-decoration: none; }
.jz-lado__pregunta b { font-size: 14px; line-height: 1.35; }
.jz-lado__pregunta small { color: var(--gris); font-size: 12.5px; }
.jz-chips { padding: 0 0 4px; flex-wrap: wrap; }
.jz-seccion-titulo, .jz-nuevos { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.jz-escribir { margin: 12px 0 0; width: 100%; }
.jz-lista { padding: 12px 0; gap: 16px; }
.jz-card { border-radius: 28px; }
.jz-negocio { border-radius: 30px; }
.jz-pestanas, .jz-yo-cab, .jz-mis-negocios { margin-left: 0; margin-right: 0; }
.jz-vitrina { padding: 12px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jz-ver { position: fixed; left: 0; right: 0; top: 0; bottom: 0; }
.jz-ver__rollo { width: 100%; max-width: 460px; margin: 0 auto; }
.jz-hoja { align-items: center; }
.jz-hoja__caja { border-radius: 28px; }
.jz-aviso { bottom: 30px; }
.jz-mapa { border-radius: 28px; overflow: hidden; }
.jz-cerca-lista { margin-top: 12px; border-radius: 28px; }
}
/* Ajustes tras la primera prueba */
.jz-main:focus, .jz-main:focus-visible { outline: none; }
.jz-escribir > svg { width: 24px; height: 24px; fill: none; stroke: var(--hoja); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jz-clip__negocio small.es-cerrado { color: #f3d1c9; }
.jz [hidden] { display: none !important; }
/* ---------- Ajustes de diseño (19/10/2026, tras verlo en línea) ---------- */
.jz-vacio--grande { display: grid; justify-items: center; gap: 8px; margin: 12px; padding: 34px 22px; }
.jz-vacio--grande b { margin: 0; font-size: 18px; }
.jz-vacio__z { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 22px; background: var(--fondo); transform: rotate(-6deg); }
.jz-vacio__z svg { width: 30px; height: 30px; fill: none; stroke: var(--orquidea); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.jz-vacio__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.jz-lado__boton { width: 100%; margin-top: 10px; }
@media (min-width: 1024px) {
/* Tres columnas fijas y centradas: menú, plaza y lo de al lado. */
.jz-barra { padding: 12px max(24px, calc((100vw - 1180px) / 2)); }
.jz-marco { display: grid; grid-template-columns: 112px minmax(0, 640px) 340px; justify-content: center; gap: 28px; max-width: none; padding: 24px 24px 48px; }
.jz-main { max-width: none; }
.jz-lado { max-width: none; }
/* El menú: una tarjeta blanca, cada sección con su ícono arriba. */
.jz-menu { top: 88px; flex: none; gap: 4px; padding: 8px; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-menu a { padding: 12px 4px; border-radius: 20px; font-size: 12.5px; }
.jz-menu a svg { width: 24px; height: 24px; }
.jz-menu__nsm { margin-top: 6px; border-top: 1px solid var(--linea); border-radius: 0 0 20px 20px !important; color: var(--hoja) !important; }
.jz-chips { padding: 0 0 12px; }
.jz-escribir { margin: 0; padding: 14px 16px; border-radius: 24px; }
.jz-vacio { margin: 16px 0; }
.jz-vacio--grande { padding: 48px 28px; border-radius: 28px; box-shadow: var(--sombra); }
.jz-lista { padding: 16px 0; }
.jz-lado { top: 88px; }
}
/* «Entrar» y negocios para seguir (19/10/2026) */
.jz-yo.jz-yo--entrar { width: auto; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--selva) !important; font-weight: 800; font-size: 14px; }
.jz-btn--chico { min-height: 32px; padding: 0 12px; font-size: 13px; border-color: transparent; background: #fbe3ef; color: var(--orquidea-hondo); }
.jz-btn--chico[aria-pressed="true"] { background: var(--suave); color: var(--gris); }
.jz-sugerido { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.jz-sugerido + .jz-sugerido { border-top: 1px solid var(--suave); }
.jz-sugerido > a { flex: 1; min-width: 0; display: grid; text-decoration: none; }
.jz-sugerido b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-sugerido small { overflow: hidden; color: var(--gris); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-lado__vertodo { display: block; margin-top: 8px; color: var(--hoja); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.jz-tarjeta-sugeridos { margin: 0 12px 16px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: var(--sombra); }
.jz-tarjeta-sugeridos h2 { margin: 0 0 6px; font-family: var(--marca); font-weight: 600; font-size: 15px; }
@media (min-width: 1024px) { .jz-solo-cel { display: none !important; } }
/* ---------- Ventana «Crear» (19/10/2026): dinámica y con oficio ---------- */
@keyframes jz-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jz-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes jz-entra { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.jz-hoja:not([hidden]) .jz-hoja__fondo { animation: jz-aparece .2s ease-out; backdrop-filter: blur(3px); }
.jz-hoja:not([hidden]) .jz-hoja__caja { animation: jz-sube .28s cubic-bezier(.2, .8, .2, 1); }
.jz-hoja__caja { box-shadow: 0 24px 60px rgb(10 25 20 / 30%); }
.jz-hoja__cab { padding: 18px 20px 10px; }
.jz-hoja__cab h2 { font-size: 18px; }
.jz-hoja__cuerpo { padding: 4px 20px 0; }
.jz-crear { gap: 16px; }
/* Tipo: tres tarjetas con ícono; la elegida en selva. */
.jz-tipos--grande { gap: 8px; padding: 0; background: none; }
.jz-tipos--grande button { display: grid; justify-items: center; gap: 2px; min-height: 0; padding: 12px 6px 10px; border: 1.5px solid var(--linea); border-radius: 18px; background: #fff; color: var(--tinta); transition: background .18s, border-color .18s, color .18s, transform .12s; }
.jz-tipos--grande button:hover { border-color: #b9c6b6; }
.jz-tipos--grande button:active { transform: scale(.97); }
.jz-tipos--grande button svg { width: 24px; height: 24px; margin-bottom: 4px; fill: none; stroke: var(--hoja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-tipos--grande button b { font-size: 14.5px; }
.jz-tipos--grande button small { color: var(--gris); font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center; }
.jz-tipos--grande button[aria-selected="true"] { border-color: var(--selva); background: var(--selva); color: #fff; box-shadow: 0 6px 16px rgb(14 59 46 / 22%); }
.jz-tipos--grande button[aria-selected="true"] svg { stroke: #b8f0cf; }
.jz-tipos--grande button[aria-selected="true"] small { color: rgb(255 255 255 / 78%); }
/* Quién publica: fichas con foto o logo; la elegida con borde orquídea. */
.jz-identidades { margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity .2s; }
.jz-identidades.es-oculto { display: none; }
.jz-identidades legend { margin-bottom: 8px; padding: 0; font-weight: 700; font-size: 13.5px; }
.jz-identidades__fila { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.jz-identidad { position: relative; display: flex !important; align-items: center; gap: 10px; flex: none; max-width: 260px; padding: 8px 34px 8px 8px; border: 1.5px solid var(--linea); border-radius: 18px; background: #fff; cursor: pointer; font-weight: 400 !important; transition: border-color .15s, background .15s; }
.jz-identidad input { position: absolute; opacity: 0; pointer-events: none; }
.jz-identidad span:not(.jz-av) { display: grid; min-width: 0; }
.jz-identidad b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-identidad small { color: var(--gris); font-size: 12px; }
.jz-identidad i { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--linea); border-radius: 50%; transform: translateY(-50%); }
.jz-identidad i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.jz-identidad:has(input:checked) { border-color: var(--orquidea); background: #fdf2f8; }
.jz-identidad:has(input:checked) i { border-color: var(--orquidea); background: var(--orquidea); }
.jz-identidad:has(input:checked) i svg { opacity: 1; }
.jz-identidad:has(input:focus-visible) { outline: 3px solid var(--orquidea); outline-offset: 2px; }
/* El texto: sin borde de formulario, crece solo, con contador. */
.jz-editor { border: 1.5px solid var(--linea); border-radius: 18px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.jz-editor:focus-within { border-color: var(--orquidea); box-shadow: 0 0 0 4px rgb(194 54 122 / 12%); }
.jz-crear .jz-editor textarea { display: block; width: 100%; min-height: 92px; max-height: 320px; padding: 14px 16px 6px; border: 0; border-radius: 18px; background: transparent; font-size: 17px; line-height: 1.45; resize: none; box-shadow: none; }
.jz-crear .jz-editor textarea:focus { outline: none; box-shadow: none; }
.jz-crear[data-tipo="PREGUNTA"] .jz-editor textarea { font-family: var(--marca); font-weight: 600; font-size: 19px; line-height: 1.3; }
.jz-editor__pie { display: flex; justify-content: space-between; gap: 10px; padding: 0 16px 10px; color: var(--gris); font-size: 12.5px; }
/* Zona para soltar fotos o el video. */
.jz-soltar { display: grid !important; justify-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed #c9d6c6; border-radius: 20px; background: var(--suave); color: var(--gris); font-weight: 400 !important; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.jz-soltar:hover, .jz-soltar.es-encima { border-color: var(--orquidea); background: #fdf2f8; }
.jz-soltar.es-encima { transform: scale(1.01); }
.jz-soltar b { color: var(--tinta); font-size: 15px; }
.jz-soltar span { font-size: 13px; }
.jz-soltar u { color: var(--orquidea-hondo); font-weight: 700; text-decoration: none; }
.jz-soltar__icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); }
.jz-soltar__icono svg { width: 24px; height: 24px; fill: none; stroke: var(--orquidea); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-soltar--video { padding: 30px 16px; }
.jz-soltar--video.es-subiendo { cursor: default; }
.jz-soltar--video.es-subiendo b { font-family: var(--marca); font-size: 28px; color: var(--orquidea); }
.jz-soltar--video .jz-progreso { width: 70%; margin-top: 8px; }
.jz-previas--grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.jz-previas--grilla .jz-previa { width: auto; height: auto; aspect-ratio: 1 / 1; animation: jz-entra .2s ease-out; }
.jz-previa em { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: rgb(14 59 46 / 85%); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.jz-soltar--chico { aspect-ratio: 1 / 1; align-content: center; padding: 8px; }
.jz-soltar--chico .jz-soltar__icono { width: 36px; height: 36px; margin: 0; box-shadow: none; }
.jz-video-listo { position: relative; width: 190px; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #000; animation: jz-entra .25s ease-out; }
.jz-video-listo video { width: 100%; height: 100%; object-fit: cover; }
.jz-video-listo .jz-icono { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgb(0 0 0 / 50%); color: #fff; }
.jz-video-listo span { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; border-radius: 12px; background: rgb(14 59 46 / 88%); color: #fff; font-size: 12.5px; font-weight: 700; }
.jz-video-listo span svg { width: 14px; height: 14px; fill: none; stroke: #b8f0cf; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Productos como tarjetas. */
.jz-etiqueta { margin: 0 0 8px; font-weight: 700; font-size: 13.5px; }
.jz-etiqueta small { color: var(--gris); font-weight: 500; }
.jz-productos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.jz-prod { position: relative; display: grid !important; align-content: start; gap: 2px; flex: none; width: 128px; padding: 8px; border: 1.5px solid var(--linea); border-radius: 16px; background: #fff; cursor: pointer; font-weight: 400 !important; transition: border-color .15s, background .15s; }
.jz-prod input { position: absolute; opacity: 0; pointer-events: none; }
.jz-prod img, .jz-prod__sin { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 4px; border-radius: 10px; object-fit: contain; background: #f4f5f2; }
.jz-prod__sin { display: grid; place-items: center; }
.jz-prod__sin svg { width: 28px; height: 28px; fill: none; stroke: #b9c6b6; stroke-width: 2; }
.jz-prod b { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.25; }
.jz-prod small { color: var(--orquidea-hondo); font-weight: 800; font-size: 12.5px; }
.jz-prod:has(input:checked) { border-color: var(--orquidea); background: #fdf2f8; }
.jz-prod:has(input:focus-visible) { outline: 3px solid var(--orquidea); outline-offset: 2px; }
/* Pie fijo: dónde se publica, el atajo y el botón. */
.jz-crear__pie { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; margin: 0 -20px; padding: 14px 20px 18px; border-top: 1px solid var(--suave); background: #fff; }
.jz-crear__ciudad { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 12px; border-radius: 999px; background: var(--suave); color: var(--gris); font-size: 13px; font-weight: 600; }
.jz-crear__ciudad svg { width: 15px; height: 15px; fill: none; stroke: var(--hoja); stroke-width: 2.2; stroke-linejoin: round; }
.jz-crear__atajo { color: #9aa49d; font-size: 12px; }
.jz-btn--grande { min-height: 48px; margin-left: auto; padding: 0 26px; font-size: 15.5px; transition: background .15s, transform .12s, opacity .15s; }
.jz-btn--grande:not(:disabled):active { transform: scale(.97); }
.jz-btn--orquidea:disabled { background: #e8c3d5; opacity: 1; }
@media (min-width: 1024px) {
.jz-hoja__caja { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
.jz-hoja__caja, .jz-hoja__fondo, .jz-previa, .jz-video-listo { animation: none !important; }
}
/* La fila de productos se desliza dentro de la ventana, sin ensancharla. */
.jz-form { grid-template-columns: minmax(0, 1fr); }
.jz-form > * { min-width: 0; }
.jz-hoja__caja { overflow: hidden; }
@media (max-width: 600px) {
.jz-hoja__cab { padding: 16px 16px 8px; }
.jz-hoja__cuerpo { padding: 4px 16px 0; }
.jz-crear__pie { margin: 0 -16px; padding: 12px 16px 16px; }
.jz-identidad { max-width: 190px; }
.jz-tipos--grande small { display: none; }
.jz-tipos--grande button { padding: 12px 6px; }
.jz-crear__ciudad { font-size: 12px; white-space: nowrap; overflow: hidden; }
.jz-crear__ciudad span { overflow: hidden; text-overflow: ellipsis; }
.jz-btn--grande { padding: 0 20px; }
}
/* Menú lateral al estilo Apple (19/10/2026): botones de ancho completo con
aire por dentro; el elegido en gris plomo y, al pasar, un gris más oscuro. */
@media (min-width: 1024px) {
.jz-menu { align-items: stretch; gap: 4px; padding: 10px; }
.jz-menu a { width: 100%; padding: 14px 6px 12px; border-radius: 16px; color: #3a3a3c; transition: background .15s, color .15s; }
.jz-menu a:hover { background: #ececf0; color: #1d1d1f; }
.jz-menu a:active { background: #dcdce1; }
.jz-menu a[aria-current="page"] { background: #e3e3e8; color: #1d1d1f; }
.jz-menu a[aria-current="page"]:hover { background: #d6d6dc; }
.jz-menu a[aria-current="page"] svg { fill: currentColor; }
.jz-menu a[aria-current="page"] svg path[d^="M10.5"] { fill: #e3e3e8; }
.jz-menu a[aria-current="page"]:hover svg path[d^="M10.5"] { fill: #d6d6dc; }
.jz-menu a.jz-menu__nsm { margin-top: 4px; padding-top: 14px; border-top: 0 !important; border-radius: 16px !important; color: var(--hoja) !important; position: relative; }
.jz-menu a.jz-menu__nsm::before { content: ""; position: absolute; top: -3px; left: 10px; right: 10px; height: 1px; background: var(--linea); }
.jz-menu a.jz-menu__nsm:hover { background: #ececf0; }
}
@media (min-width: 1024px) {
.jz-menu a:hover { background: #e5e5ea; }
.jz-menu a:active { background: #d1d1d6; }
.jz-menu a[aria-current="page"] { background: #dcdce1; }
.jz-menu a[aria-current="page"]:hover { background: #d1d1d6; }
.jz-menu a[aria-current="page"] svg path[d^="M10.5"] { fill: #dcdce1; }
.jz-menu a[aria-current="page"]:hover svg path[d^="M10.5"] { fill: #d1d1d6; }
.jz-menu a.jz-menu__nsm:hover { background: #e5e5ea; }
}
/* Comentarios debajo de la publicación (19/10/2026) */
.jz-card__comentarios { display: grid; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid var(--suave); animation: jz-entra .2s ease-out; }
.jz-card__comentarios .jz-comentarios { gap: 10px; }
.jz-card__comentarios .jz-nota { margin: 0; }
.jz-comentar { margin-top: 0; padding-top: 0; border-top: 0; gap: 6px; }
.jz-hoja .jz-comentar { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linea); }
.jz-card__comentarios .jz-comentar { position: static; }
.jz-comentar__fila { align-items: flex-end; }
.jz-comentar__fila .jz-av { margin-bottom: 4px; }
.jz-comentar textarea { min-height: 40px; max-height: 160px; padding: 9px 14px; border: 0; border-radius: 20px; background: var(--suave); font-size: 15px; line-height: 1.35; }
.jz-comentar textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--orquidea); background: #fff; }
.jz-comentar__enviar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--orquidea); color: #fff; }
.jz-comentar__enviar:hover { background: var(--orquidea-hondo); }
.jz-comentar__enviar:disabled { opacity: .5; }
.jz-comentar__enviar svg { width: 18px; height: 18px; fill: #fff; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.jz-comentar__como { display: inline-flex !important; align-items: center; gap: 6px; justify-self: start; color: var(--gris); font-size: 12.5px; font-weight: 600; }
.jz-comentar__como select { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 26px 0 10px; border: 1.5px solid var(--linea); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1.5l4 4 4-4' fill='none' stroke='%235f5e57' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--tinta); font-size: 13px; font-weight: 700; cursor: pointer; }
.jz-card .jz-btn[data-jz-comentar][aria-expanded="true"] { border-color: var(--selva); }
.jz-comentario__burbuja b a { color: inherit; text-decoration: none; } .jz-comentario__burbuja b a:hover { text-decoration: underline; }
/* ── Encabezado: cuadritos de NSM y chat; el cajón entra por la izquierda ── */
.jz-barra__icono { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 13px; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; transition: background .15s; }
.jz-barra__icono:hover { background: rgb(255 255 255 / 22%); }
.jz-barra__icono[aria-expanded="true"] { background: #fff; color: var(--selva); }
.jz-barra__icono svg { width: 21px; height: 21px; }
.jz-barra__icono--apps svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.jz-barra__icono--chat svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-barra__pronto { position: absolute; top: -5px; right: -9px; padding: 1px 5px; border-radius: 7px; background: var(--orquidea); color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: .02em; }
.jz-sin-scroll, .jz-sin-scroll body { overflow: hidden; }
.jz-cajon { position: fixed; inset: 0; z-index: 40; }
.jz-cajon__fondo { position: absolute; inset: 0; background: rgb(10 42 32 / 0%); transition: background .2s; }
.jz-cajon--abierto .jz-cajon__fondo { background: rgb(10 42 32 / 32%); }
.jz-cajon__caja { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(380px, 92vw); background: #fff; border-radius: 0 28px 28px 0; box-shadow: 18px 0 50px rgb(14 59 46 / 22%); transform: translateX(-104%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.jz-cajon--abierto .jz-cajon__caja { transform: none; }
.jz-cajon__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 10px 22px; opacity: 1; max-height: 80px; overflow: hidden; transform: translateY(0); transition: max-height .18s ease, opacity .18s ease, padding .18s ease, transform .18s ease; }
.jz-cajon__cab h2 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 19px; color: var(--selva); transition: opacity .18s ease; }
.jz-cajon__cab .jz-icono { transition: opacity .18s ease; }
.jz-cajon__cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px 24px; overscroll-behavior: contain; }
.jz-cajon.jz-cajon--chat-conv .jz-cajon__cab { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: translateY(-8px); pointer-events: none; }
.jz-cajon.jz-cajon--chat-conv .jz-cajon__cab h2,
.jz-cajon.jz-cajon--chat-conv .jz-cajon__cab .jz-icono { opacity: 0; }
.jz-apps__sub { margin: 14px 6px 8px; color: var(--gris); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jz-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.jz-apps__app { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; color: var(--tinta); font-size: 12.5px; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.2; transition: background .15s; }
.jz-apps__app:hover { background: #ececf0; }
.jz-apps__icono { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #f2f4f1; }
.jz-apps__icono svg { width: 34px; height: 34px; }
.jz-chat__buscar input { width: 100%; height: 42px; padding: 0 14px; border: 0; border-radius: 14px; background: #f0f2ef; font: inherit; font-size: 14px; }
.jz-chat__pronto { display: grid; justify-items: center; gap: 8px; margin-top: 26px; padding: 24px 18px; border-radius: 22px; background: #f7f3f6; text-align: center; }
.jz-chat__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: var(--orquidea); color: #fff; transform: rotate(-6deg); }
.jz-chat__icono svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-chat__pronto b { margin-top: 6px; font-family: var(--marca); font-weight: 600; font-size: 16px; color: var(--selva); }
.jz-chat__pronto p { margin: 0; color: var(--gris); font-size: 14px; line-height: 1.5; }
.jz-chat__pronto ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; text-align: left; font-size: 14px; }
.jz-chat__pronto li::before { content: "•"; margin-right: 8px; color: var(--orquidea); font-weight: 800; }
@media (max-width: 520px) {
.jz-barra { gap: 6px; padding: 10px 12px; }
.jz-logo { font-size: 20px; }
.jz-ciudad { min-width: 0; }
.jz-ciudad select { max-width: 112px; padding-left: 10px; text-overflow: ellipsis; }
.jz-barra__acciones { gap: 6px; }
.jz-barra__icono { width: 34px; height: 34px; border-radius: 12px; }
.jz-barra__pronto { right: -6px; font-size: 8px; }
.jz-yo { width: 34px; height: 34px; border-radius: 12px; }
.jz-yo.jz-yo--entrar { padding: 0 12px; font-size: 13px; }
}
.jz-apps__icono img { width: 34px; height: 34px; }
/* ── Pantalla ancha (19/10/2026): todo el ancho, tres columnas tipo Facebook ── */
.jz-izq { display: contents; }
.jz-izq__tarjeta, .jz-buscar, .jz-lado__vitrina { display: none; }
@media (min-width: 1024px) {
.jz-buscar { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; height: 40px; margin-left: 18px; padding: 0 14px; border-radius: 20px; background: rgb(255 255 255 / 12%); color: rgb(255 255 255 / 75%); transition: background .15s; }
.jz-buscar:focus-within { background: #fff; color: var(--gris); }
.jz-buscar svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jz-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: none; }
.jz-buscar:focus-within input { color: var(--tinta); }
.jz-buscar input::placeholder { color: rgb(255 255 255 / 70%); }
.jz-buscar:focus-within input::placeholder { color: var(--gris); }
}
@media (min-width: 1280px) {
.jz-barra { padding: 10px 20px; }
.jz-marco { grid-template-columns: minmax(280px, 1fr) minmax(0, 680px) minmax(300px, 1fr); gap: 32px; padding: 20px 20px 48px; }
.jz-izq { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 340px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 8px; }
.jz-lado { justify-self: end; width: 100%; max-width: 380px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 8px; }
.jz-izq .jz-menu { position: static; display: flex; padding: 8px; }
.jz-izq .jz-menu a { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 11px 14px; font-size: 15px; font-weight: 600; }
.jz-izq .jz-menu a span { font-size: 15px; }
.jz-izq .jz-menu a.jz-menu__nsm { padding-top: 11px; }
.jz-izq__tarjeta { display: block; padding: 10px; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-izq__yo { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 18px; text-decoration: none; transition: background .15s; }
.jz-izq__yo:hover { background: #e5e5ea; }
.jz-izq__yo .jz-av { width: 46px; height: 46px; }
.jz-izq__yo span { display: grid; min-width: 0; }
.jz-izq__yo b { overflow: hidden; color: var(--tinta); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.jz-izq__yo small { color: var(--gris); font-size: 12.5px; }
.jz-izq__entrar { display: grid; gap: 6px; padding: 10px; }
.jz-izq__entrar b { font-family: var(--marca); font-weight: 600; font-size: 15px; color: var(--selva); }
.jz-izq__entrar p { margin: 0 0 6px; color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.jz-izq__extra h2 { margin: 8px 10px 6px; color: var(--gris); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jz-izq__extra hr { margin: 8px 10px; border: 0; border-top: 1px solid var(--linea); }
.jz-izq__fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 14px; background: none; color: var(--tinta); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; }
.jz-izq__fila:hover { background: #e5e5ea; }
.jz-izq__fila > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-izq__fila .jz-av { width: 36px; height: 36px; border-radius: 12px; }
.jz-izq__icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: #f2f4f1; }
.jz-izq__icono svg, .jz-izq__icono img { width: 26px; height: 26px; }
.jz-izq__icono--gris svg { width: 16px; height: 16px; fill: #3a3a3c; }
.jz-izq__pie { margin: 10px 10px 4px; color: #9a9a96; font-size: 12px; line-height: 1.4; }
.jz-lado__vitrina { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jz-lado__vitrina a { display: grid; gap: 2px; min-width: 0; text-decoration: none; }
.jz-lado__vitrina img { width: 100%; aspect-ratio: 1; margin-bottom: 4px; border-radius: 16px; object-fit: cover; background: #f4f5f2; }
.jz-lado__vitrina b { overflow: hidden; color: var(--tinta); font-size: 13.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.jz-lado__vitrina small { overflow: hidden; color: var(--gris); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
}
.jz-lado__unete { display: none; }
@media (min-width: 1024px) {
.jz-lado section.jz-lado__unete { display: grid; justify-items: start; gap: 4px; background: linear-gradient(160deg, #fff 55%, #fbe3ef); }
.jz-lado__unete h2 { margin: 6px 0 0 !important; }
.jz-lado__unete p { margin: 0; color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.jz-lado__z { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: var(--orquidea); transform: rotate(-6deg); }
.jz-lado__z svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.jz-lado__pie { margin: 0 6px; color: #9a9a96; font-size: 12px; line-height: 1.6; }
.jz-lado__pie a { color: inherit; }
}
/* ── Perfil de persona (19/10/2026) ── */
.jz-card__av { flex: none; display: block; text-decoration: none; }
a.jz-card__quien b:hover { text-decoration: underline; }
.jz-perfil { margin: 12px; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-perfil__portada { position: relative; height: 128px; background:
radial-gradient(circle at 85% 20%, rgb(194 54 122 / 55%) 0 70px, transparent 71px),
radial-gradient(circle at 12% 110%, rgb(214 64 42 / 35%) 0 90px, transparent 91px),
linear-gradient(135deg, #0e3b2e, #155741 60%, #0a2a20); }
.jz-perfil__z { position: absolute; right: 18px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgb(255 255 255 / 14%); transform: rotate(-6deg); }
.jz-perfil__z svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.jz-perfil__id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 14px; padding: 0 18px 14px; }
.jz-av.jz-av--perfil { width: 104px; height: 104px; margin-top: -52px; border: 5px solid #fff; border-radius: 34px; font-family: var(--marca); font-size: 36px; box-shadow: 0 8px 20px rgb(14 59 46 / 18%); }
.jz-perfil__nombre h1 { margin: 0; font-family: var(--marca); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta); }
.jz-perfil__nombre p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 4px 0 0; color: var(--gris); font-size: 13.5px; }
.jz-perfil__nombre p svg { width: 15px; height: 15px; fill: none; stroke: var(--orquidea); stroke-width: 2; }
.jz-perfil__botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jz-perfil__botones .jz-btn { min-height: 42px; padding: 0 18px; border-radius: 14px; font-weight: 700; }
.jz-perfil__botones .jz-btn:not(.jz-btn--orquidea) { border-color: transparent; background: #ececf0; color: var(--tinta); }
.jz-perfil__botones .jz-btn:not(.jz-btn--orquidea):hover { background: #e0e0e5; }
.jz-perfil__botones svg { width: 18px; height: 18px; }
.jz-perfil__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.jz-perfil__cifras span { display: grid; justify-items: center; gap: 1px; padding: 12px 4px; text-align: center; }
.jz-perfil__cifras span + span { border-left: 1px solid var(--linea); }
.jz-perfil__cifras b { font-family: var(--marca); font-weight: 700; font-size: 18px; color: var(--selva); }
.jz-perfil__cifras small { color: var(--gris); font-size: 11.5px; line-height: 1.2; }
.jz-perfil__negocios { margin: 0 12px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: var(--sombra); }
.jz-perfil__negocios h2 { margin: 0 0 10px; font-family: var(--marca); font-weight: 600; font-size: 15px; }
.jz-perfil__negocios > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.jz-perfil__negocios a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 16px; background: #f4f5f2; text-decoration: none; transition: background .15s; }
.jz-perfil__negocios a:hover { background: #e9ece7; }
.jz-perfil__negocios a > span:last-child { display: grid; min-width: 0; }
.jz-perfil__negocios b { overflow: hidden; color: var(--tinta); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-perfil__negocios small { overflow: hidden; color: var(--gris); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-pestanas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ── Negocios: directorio dentro de PLAZUNI (19/10/2026) ── */
.jz-dir-cab { display: grid; gap: 14px; margin: 12px; padding: 22px 20px 20px; border-radius: 28px; color: #fff; background:
radial-gradient(circle at 92% 0%, rgb(194 54 122 / 60%) 0 90px, transparent 91px),
linear-gradient(135deg, #0e3b2e, #155741); box-shadow: var(--sombra); }
.jz-dir-cab__texto p { margin: 0; color: rgb(255 255 255 / 75%); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.jz-dir-cab__texto h1 { margin: 2px 0 0; font-family: var(--marca); font-weight: 800; font-size: 30px; letter-spacing: -.03em; line-height: 1.05; }
.jz-dir-cab__texto small { display: block; margin-top: 6px; color: var(--orquidea-claro); font-size: 13.5px; font-weight: 700; }
.jz-dir-buscar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 16px; background: #fff; color: var(--gris); }
.jz-dir-buscar svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jz-dir-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--tinta); font: inherit; font-size: 15px; outline: none; }
.jz-dir-rubros { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 12px; scrollbar-width: none; }
.jz-dir-rubros .jz-chip { flex: none; }
.jz-chip--abierto i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #2fbf71; vertical-align: 1px; }
.jz-dir-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
.jz-dir-grilla > .jz-cargando, .jz-dir-grilla > .jz-vacio { grid-column: 1 / -1; }
.jz-dir-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.jz-dir-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(14 59 46 / 14%); }
.jz-dir-card__portada { display: block; height: 78px; background: linear-gradient(135deg, hsl(var(--tono) 32% 30%), hsl(calc(var(--tono) + 40) 40% 42%)); }
.jz-dir-card__portada img { width: 100%; height: 100%; object-fit: cover; }
.jz-dir-card__cuerpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 12px 12px; }
.jz-av.jz-dir-card__logo { width: 56px; height: 56px; margin-top: -28px; margin-bottom: 4px; border: 3px solid #fff; border-radius: 18px; background: #fff; color: var(--selva); font-family: var(--marca); font-size: 17px; box-shadow: 0 4px 12px rgb(14 59 46 / 14%); }
.jz-dir-card__logo:not(:has(img)) { background: var(--selva); color: #fff; }
.jz-dir-card__logo img { object-fit: contain; }
.jz-dir-card__nombre { display: flex; align-items: center; gap: 4px; max-width: 100%; color: var(--tinta); text-decoration: none; }
.jz-dir-card__nombre b { display: -webkit-box; overflow: hidden; font-size: 14.5px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jz-dir-card__nombre:hover b { text-decoration: underline; }
.jz-dir-card__nombre .jz-sello { flex: none; width: 15px; height: 15px; }
.jz-dir-card__cuerpo > small { overflow: hidden; max-width: 100%; color: var(--gris); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-dir-card__cuerpo > small.jz-dir-card__sin { color: #a5a5a0; }
.jz-dir-card__cuerpo .jz-btn--chico { width: 100%; margin-top: auto; }
.jz-dir-card__cuerpo > small:last-of-type { margin-bottom: 10px; }
.jz-dir-vacio { margin: 8px 0 !important; }
[data-jz-dir-mas] { display: flex; margin: 16px auto 0; }
@media (min-width: 1024px) {
.jz-perfil, .jz-dir-cab { margin: 0 0 14px; }
.jz-perfil__portada { height: 170px; }
.jz-perfil__id { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 22px 18px; }
.jz-av.jz-av--perfil { width: 132px; height: 132px; margin-top: -66px; border-radius: 42px; font-size: 44px; }
.jz-perfil__nombre h1 { font-size: 26px; }
.jz-perfil__botones { grid-column: auto; margin: 0; }
.jz-perfil__negocios { margin: 0 0 14px; }
.jz-perfil__cifras small { font-size: 12.5px; }
.jz-pestanas { margin: 0; }
.jz-dir-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; padding: 28px; }
.jz-dir-cab__texto h1 { font-size: 36px; }
.jz-dir-rubros { padding: 0 0 14px; flex-wrap: wrap; overflow: visible; }
.jz-dir-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; }
.jz-dir-card__portada { height: 92px; }
}
.jz-perfil__id > .jz-av--perfil { position: relative; z-index: 1; align-self: start; }
.jz-perfil__nombre { align-self: end; padding-top: 10px; }
.jz-perfil__nombre p { margin-top: 3px; }
@media (min-width: 1024px) {
.jz-dir-rubros { flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 40px; }
}
/* ── Centro más ancho, perfil y buscador (19/10/2026) ── */
@media (min-width: 1280px) {
.jz-marco { grid-template-columns: minmax(270px, 1fr) minmax(0, 780px) minmax(290px, 1fr); gap: 28px; }
}
@media (min-width: 1024px) {
.jz-perfil__id { grid-template-columns: auto minmax(0, 1fr); }
.jz-perfil__botones { grid-column: 2; justify-self: start; margin-top: 4px; }
}
.jz-barra__lupa { display: grid; }
.jz-barra__lupa svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (min-width: 1024px) { .jz-barra__lupa { display: none; } }
.jz-buscar { position: relative; }
.jz-sugerencias { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 18px 50px rgb(10 25 20 / 28%); }
.jz-sug__grupo { margin: 8px 10px 4px; color: var(--gris); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jz-sug { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; color: var(--tinta); text-decoration: none; }
.jz-sug:hover, .jz-sug:focus-visible { background: #ececf0; }
.jz-sug > span:last-child { display: grid; min-width: 0; }
.jz-sug b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.jz-sug small { overflow: hidden; color: var(--gris); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-sug .jz-av { width: 36px; height: 36px; border-radius: 12px; }
.jz-sug--todo { margin-top: 6px; border-top: 1px solid var(--linea); border-radius: 0 0 14px 14px; padding-top: 11px; }
.jz-sug__lupa { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--orquidea); color: #fff; }
.jz-sug__lupa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.jz-sug__nada { margin: 10px; color: var(--gris); font-size: 13.5px; }
.jz-bus-cab { display: grid; gap: 14px; margin: 12px; padding: 18px; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-bus-cab .jz-dir-buscar { background: #f0f2ef; padding-right: 6px; }
.jz-bus-cab .jz-dir-buscar .jz-btn { min-height: 38px; padding: 0 16px; border-radius: 12px; }
.jz-bus-tipos { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border-radius: 999px; background: #f0f2ef; scrollbar-width: none; }
.jz-bus-tipos button { flex: 1 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--gris); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.jz-bus-tipos button[aria-selected="true"] { background: var(--selva); color: #fff; }
.jz-bus-zona { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gris); font-size: 13.5px; font-weight: 700; }
.jz-bus-zona .jz-chip svg { width: 15px; height: 15px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; }
.jz-bus-res { display: grid; gap: 14px; padding: 0 12px; }
.jz-bus-res > .jz-lista { padding: 0; }
.jz-bus-sec header { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 4px 10px; }
.jz-bus-sec h2 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 17px; }
.jz-bus-sec h2 small { margin-left: 6px; color: var(--gris); font-family: inherit; font-size: 13px; font-weight: 700; }
.jz-bus-sec header button { border: 0; background: none; color: var(--hoja); font: inherit; font-weight: 700; cursor: pointer; }
.jz-bus-sec .jz-dir-grilla { padding: 0; }
.jz-bus-personas { display: grid; gap: 2px; padding: 6px; border-radius: 24px; background: #fff; box-shadow: var(--sombra); }
.jz-bus-persona { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 18px; color: var(--tinta); text-decoration: none; }
.jz-bus-persona:hover { background: #ececf0; }
.jz-bus-persona > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.jz-bus-persona b { font-size: 15px; }
.jz-bus-persona small { color: var(--gris); font-size: 12.5px; }
.jz-bus-persona .jz-av { width: 48px; height: 48px; border-radius: 16px; }
.jz-bus-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jz-bus-producto { display: grid; gap: 2px; min-width: 0; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; transition: transform .15s; }
.jz-bus-producto:hover { transform: translateY(-2px); }
.jz-bus-producto img { width: 100%; aspect-ratio: 1; margin-bottom: 6px; border-radius: 14px; object-fit: cover; background: #f4f5f2; }
.jz-bus-producto b { display: -webkit-box; overflow: hidden; font-size: 13.5px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jz-bus-producto small { color: var(--selva); font-size: 13px; font-weight: 800; }
.jz-bus-producto small.jz-bus-producto__neg { overflow: hidden; color: var(--gris); font-weight: 600; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.jz-bus-ayuda { margin: 0 !important; }
.jz-bus-nota { margin: 0 4px; }
@media (min-width: 1024px) {
.jz-bus-cab { margin: 0 0 14px; }
.jz-bus-res { padding: 0; }
.jz-bus-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jz-bus-productos--sola { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .jz-ciudad select { max-width: 104px; } }
@media (max-width: 430px) {
.jz-barra { gap: 5px; padding: 10px; }
.jz-logo { font-size: 19px; }
.jz-ciudad select { max-width: 86px; height: 34px; padding: 0 22px 0 9px; font-size: 13px; background-position: right 8px center; }
.jz-barra__acciones { gap: 5px; }
.jz-barra__icono, .jz-yo { width: 32px; height: 32px; }
.jz-yo.jz-yo--entrar { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 370px) { .jz-ciudad select { max-width: 74px; } .jz-logo { font-size: 17px; } }
.jz-premium { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: linear-gradient(135deg, #c2367a, #9e2a62); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
/* ── Selector de zona propio y foco más fino (19/10/2026) ── */
.jz-barra :focus-visible, .jz-barra input:focus-visible { outline: none; }
.jz-buscar:focus-within { box-shadow: 0 0 0 2px rgb(255 255 255 / 55%); }
.jz-ciudad--propia { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.jz-zona { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 240px; height: 36px; padding: 0 12px 0 11px; border: 0; border-radius: 18px; background: rgb(255 255 255 / 14%); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s; }
.jz-zona:hover, .jz-zona[aria-expanded="true"] { background: rgb(255 255 255 / 24%); }
.jz-zona:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / 60%); }
.jz-zona > svg:first-child { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--orquidea-claro); stroke-width: 2; }
.jz-zona span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-zona__flecha { flex: none; width: 11px; height: 8px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; transition: transform .15s; }
.jz-zona[aria-expanded="true"] .jz-zona__flecha { transform: rotate(180deg); }
.jz-zona-fondo { position: fixed; inset: 0; z-index: 44; }
.jz-zona-panel { position: fixed; z-index: 45; top: var(--y); left: var(--x); display: flex; flex-direction: column; width: min(420px, calc(100vw - 24px)); max-height: min(72vh, 620px); overflow: hidden; border-radius: 24px; background: #fff; color: var(--tinta); box-shadow: 0 24px 60px rgb(10 25 20 / 30%); animation: jz-entra .18s ease-out; }
.jz-zona-panel__cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 4px 18px; }
.jz-zona-panel__cab b { font-family: var(--marca); font-weight: 600; font-size: 16px; color: var(--selva); }
.jz-zona-panel__buscar { display: flex; align-items: center; gap: 8px; margin: 6px 14px 8px; height: 42px; padding: 0 12px; border-radius: 14px; background: #f0f2ef; color: var(--gris); }
.jz-zona-panel__buscar:focus-within { background: #e8ebe6; }
.jz-zona-panel__buscar svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jz-zona-panel__buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--tinta); font: inherit; font-size: 14.5px; outline: none; }
.jz-zona-panel__lista { flex: 1; overflow-y: auto; padding: 0 14px 14px; overscroll-behavior: contain; }
.jz-zona-panel__sub { margin: 10px 4px 8px; color: var(--gris); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jz-zona-panel__nada { margin: 18px 4px; color: var(--gris); font-size: 14px; }
.jz-zona-sm { padding: 2px 10px 12px; border-radius: 18px; background: #f4f6f3; }
.jz-zona-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jz-zona-chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; }
.jz-zona-chip:hover { background: #ececf0; }
.jz-zona-chip--todo { border-color: transparent; background: #e3e3e8; font-weight: 800; }
.jz-zona-chip[aria-pressed="true"] { border-color: var(--selva); background: var(--selva); color: #fff; }
.jz-zona-chip:focus-visible, .jz-zona-fila:focus-visible, .jz-zona-reg__cab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--selva); }
.jz-zona-reg { border-bottom: 1px solid #eef0ec; }
.jz-zona-reg__cab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 6px; border: 0; background: none; color: var(--tinta); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; border-radius: 12px; }
.jz-zona-reg__cab:hover { background: #f2f2f5; }
.jz-zona-reg__cab span { flex: 1; }
.jz-zona-reg__cab small { color: var(--gris); font-size: 12px; }
.jz-zona-reg__cab svg { width: 11px; height: 8px; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; transition: transform .15s; }
.jz-zona-reg.es-abierta .jz-zona-reg__cab svg { transform: rotate(180deg); }
.jz-zona-reg .jz-zona-chips { padding: 0 6px 12px; }
.jz-zona-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 14px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.jz-zona-fila:hover, .jz-zona-fila[aria-pressed="true"] { background: #ececf0; }
.jz-zona-fila > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--orquidea); stroke-width: 2; }
.jz-zona-fila span { display: grid; }
.jz-zona-fila b { font-size: 14.5px; }
.jz-zona-fila small { color: var(--gris); font-size: 12.5px; }
@media (max-width: 699px) {
.jz-zona-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82vh; border-radius: 26px 26px 0 0; animation: jz-sube .24s cubic-bezier(.2, .8, .2, 1); }
.jz-zona-fondo { background: rgb(10 42 32 / 35%); }
}
@media (max-width: 520px) { .jz-zona { max-width: 112px; height: 34px; padding: 0 9px; gap: 5px; font-size: 13px; } .jz-zona > svg:first-child { display: none; } }
@media (max-width: 370px) { .jz-zona { max-width: 86px; } }
.jz .jz-zona { font-family: var(--texto); font-weight: 700; font-size: 14px; }
.jz-zona-panel__cab, .jz-zona-panel__buscar { flex: none; }
.jz input[type="search"]:focus-visible { outline: none; }
.jz-dir-buscar:focus-within { box-shadow: 0 0 0 2px rgb(14 59 46 / 25%); }
@media (max-width: 520px) { .jz .jz-zona { font-size: 13px; } }
/* ── Perfil: seguidores, presentación, portada y editar (19/10/2026) ── */
.jz-perfil__portada.con-foto { background: var(--selva); }
.jz-perfil__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jz-perfil__presentacion { display: block !important; margin: 6px 0 4px !important; color: var(--tinta) !important; font-size: 14.5px !important; line-height: 1.45; }
.jz-perfil__cifras button { display: grid; justify-items: center; gap: 1px; padding: 12px 4px; border: 0; border-left: 1px solid var(--linea); background: none; font: inherit; text-align: center; cursor: pointer; transition: background .15s; }
.jz-perfil__cifras button:hover { background: #f4f5f2; }
.jz-perfil__cifras button + span { border-left: 1px solid var(--linea); }
.jz-perfil__cifras button b { font-family: var(--marca); font-weight: 700; font-size: 18px; color: var(--selva); }
.jz-perfil__cifras button small { color: var(--gris); font-size: 11.5px; line-height: 1.2; }
.jz-perfil__botones .jz-btn[data-jz-seguir-u][aria-pressed="true"] { background: #ececf0; color: var(--tinta) !important; }
.jz-gente { display: grid; gap: 2px; }
.jz-gente a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; color: var(--tinta); text-decoration: none; }
.jz-gente a:hover { background: #ececf0; }
.jz-gente a > span:last-child { display: grid; }
.jz-gente small { color: var(--gris); font-size: 12.5px; }
.jz-editar { display: grid; gap: 14px; }
.jz-editar__portada { position: relative; height: 130px; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 85% 20%, rgb(194 54 122 / 55%) 0 60px, transparent 61px), linear-gradient(135deg, #0e3b2e, #155741); }
.jz-editar__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jz-editar__acciones { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.jz-editar__acciones .jz-btn { min-height: 34px; padding: 0 12px; border: 0; border-radius: 12px; background: rgb(255 255 255 / 92%); color: var(--tinta) !important; font-size: 13px; font-weight: 700; }
.jz-editar__foto { display: flex; align-items: center; gap: 14px; margin-top: -46px; padding-left: 14px; }
.jz-editar__foto .jz-av--perfil { width: 92px !important; height: 92px !important; margin: 0 !important; border-radius: 30px !important; font-size: 30px !important; }
.jz-editar__foto > div { padding-top: 40px; }
.jz-editar__foto b { display: block; margin-bottom: 6px; font-size: 15px; }
.jz-editar__botones { display: flex; flex-wrap: wrap; gap: 6px; }
.jz-editar__botones .jz-btn { min-height: 34px; padding: 0 12px; border-color: transparent; border-radius: 12px; background: #ececf0; font-size: 13px; font-weight: 700; }
.jz-editar .jz-btn svg { width: 16px; height: 16px; }
.jz-editar__campo { display: grid; gap: 6px; }
.jz-editar__campo span { font-weight: 700; font-size: 14px; }
.jz-editar__campo textarea { min-height: 84px; padding: 12px 14px; border: 1.5px solid var(--linea); border-radius: 16px; font-size: 15px; line-height: 1.45; resize: vertical; }
.jz-editar__campo textarea:focus { border-color: var(--selva); outline: none; }
.jz-editar__campo small { justify-self: end; color: var(--gris); font-size: 12px; }
.jz-editar__nota { margin: 0; font-size: 13px; }
.jz-editar__nota a { color: var(--hoja); font-weight: 700; }
.jz-editar__pie { display: flex; justify-content: flex-end; gap: 8px; }
.jz-editar__pie .jz-btn { min-height: 44px; padding: 0 20px; border-radius: 14px; font-weight: 700; }
.jz-editar__foto { position: relative; z-index: 1; }
/* «Seguir» en orquídea puro, no pastel (19/10/2026) */
.jz .jz-btn--chico { border-color: transparent; background: var(--orquidea); color: #fff !important; font-weight: 700; transition: background .15s, transform .1s; }
.jz .jz-btn--chico:hover { background: var(--orquidea-hondo); }
.jz .jz-btn--chico:active { transform: scale(.97); }
.jz .jz-btn--chico[aria-pressed="true"] { background: #e5e5ea; color: #1d1d1f !important; }
.jz .jz-btn--chico[aria-pressed="true"]:hover { background: #d1d1d6; }
/* ── Reacciones como en las redes y emojis para escribir (19/10/2026) ── */
.jz-reac-caja { position: relative; display: inline-flex; }
.jz-reac { gap: 6px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.jz-reac__pulgar { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.jz-reac__e { font-size: 18px; line-height: 1; }
.jz .jz-btn.jz-reac.es-on { border-color: color-mix(in srgb, var(--rc) 35%, transparent); background: color-mix(in srgb, var(--rc) 10%, #fff); color: var(--rc); font-weight: 700; }
.jz-reac-barra { position: absolute; bottom: calc(100% + 10px); left: -6px; z-index: 30; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: #fff; box-shadow: 0 10px 34px rgb(10 25 20 / 24%), 0 0 0 1px rgb(10 25 20 / 6%); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.9); transform-origin: 20px 100%; transition: opacity .16s, transform .16s, visibility 0s .16s; }
.jz-reac-barra::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.jz-reac-barra button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.jz-reac-barra button span { font-size: 30px; line-height: 1; transition: transform .14s cubic-bezier(.3, 1.6, .5, 1); }
.jz-reac-barra button:hover span, .jz-reac-barra button:focus-visible span { transform: scale(1.35) translateY(-6px); }
.jz-reac-barra button:focus-visible { outline: none; }
.jz-reac-caja.es-abierta .jz-reac-barra { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .2s cubic-bezier(.3, 1.4, .5, 1), visibility 0s; }
@media (hover: hover) {
.jz-reac-caja:hover .jz-reac-barra, .jz-reac-caja:focus-within .jz-reac-barra { opacity: 1; visibility: visible; transform: none; transition: opacity .16s .45s, transform .2s .45s cubic-bezier(.3, 1.4, .5, 1), visibility 0s .45s; }
}
.jz-reac-caja.es-abierta .jz-reac-barra button span { animation: jz-reac-sube .3s backwards; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(2) span { animation-delay: .03s; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(3) span { animation-delay: .06s; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(4) span { animation-delay: .09s; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(5) span { animation-delay: .12s; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(6) span { animation-delay: .15s; }
.jz-reac-caja.es-abierta .jz-reac-barra button:nth-child(7) span { animation-delay: .18s; }
@keyframes jz-reac-sube { from { transform: translateY(14px) scale(.5); opacity: 0; } }
.jz-reac-caja--clip .jz-reac-barra { left: auto; right: calc(100% + 8px); bottom: -6px; flex-direction: row-reverse; transform-origin: 100% 50%; }
.jz-card__cuentas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px; padding: 10px 2px 8px; border-bottom: 1px solid var(--linea); color: var(--gris); font-size: 13.5px; }
.jz-card__cuentas button { border: 0; background: none; color: var(--gris); font: inherit; cursor: pointer; }
.jz-card__cuentas button:hover { text-decoration: underline; }
.jz-reac-resumen { display: inline-flex; align-items: center; gap: 6px; }
.jz-reac-resumen__e { display: inline-flex; }
.jz-reac-resumen__e i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -5px; border: 2px solid #fff; border-radius: 50%; background: #f4f5f2; font-size: 13px; font-style: normal; line-height: 1; }
.jz-reac-resumen__e i:first-child { margin-left: 0; }
.jz-emoji-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; cursor: pointer; filter: grayscale(.35); transition: background .15s, filter .15s; }
.jz-emoji-btn:hover { background: #ececf0; filter: none; }
.jz-editor__pie { align-items: center; }
.jz-emojis { position: fixed; z-index: 70; display: flex; flex-direction: column; width: min(340px, calc(100vw - 16px)); height: 300px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgb(10 25 20 / 28%), 0 0 0 1px rgb(10 25 20 / 6%); animation: jz-entra .15s ease-out; }
.jz-emojis__tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--linea); }
.jz-emojis__tabs button { flex: 1; height: 34px; border: 0; border-radius: 10px; background: none; font-size: 18px; cursor: pointer; filter: grayscale(.6); }
.jz-emojis__tabs button[aria-pressed="true"] { background: #ececf0; filter: none; }
.jz-emojis__grilla { flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-content: start; gap: 2px; overflow-y: auto; padding: 6px 8px 10px; }
.jz-emojis__grilla p { grid-column: 1 / -1; margin: 4px 2px 4px; color: var(--gris); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.jz-emojis__grilla button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; background: none; font-size: 24px; line-height: 1; cursor: pointer; transition: background .1s, transform .1s; }
.jz-emojis__grilla button:hover { background: #ececf0; transform: scale(1.12); }
.jz-comentar__fila { align-items: flex-end; }
.jz-reac__e, .jz-reac-barra button span, .jz-reac-resumen__e i, .jz-emoji-btn, .jz-emojis button, .jz-card__texto, .jz-comentario p { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--texto), sans-serif; }
.jz-card__texto, .jz-comentario p { font-family: var(--texto), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
/* ══ Chat (19/10/2026) ══ */
.jz-barra__globo { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orquidea); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--selva); }
.jz-cajon[data-cual="chat"] .jz-cajon__caja { width: min(440px, 100vw); }
.jz-cajon[data-cual="chat"] .jz-cajon__cab { padding-bottom: 6px; }
.jz-cajon[data-cual="chat"] .jz-cajon__cuerpo { display: flex; min-height: 0; padding: 0; overflow: hidden; }
.jz-cajon[data-cual="chat"] .jz-cajon__cuerpo > div { flex: 1; min-width: 0; }
@media (max-width: 520px) { .jz-cajon[data-cual="chat"] .jz-cajon__caja { width: 100vw; border-radius: 0; } }
.jz-chat { display: flex; height: 100%; min-height: 0; }
.jz-chat__lista { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.jz-chat--cajon.con-conv .jz-chat__lista { display: none; }
.jz-chat__conv { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: #f6f7f5; }
.jz-chat__cab { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.jz-chat__cab h2 { margin: 10px 4px 4px; font-family: var(--marca); font-weight: 600; font-size: 20px; color: var(--selva); }
.jz-chat--cajon .jz-chat__cab { position: absolute; top: 14px; right: 62px; padding: 0; }
.jz-chat__buscar { display: flex; align-items: center; gap: 8px; margin: 6px 14px 8px; height: 40px; padding: 0 12px; border-radius: 14px; background: #f0f2ef; color: var(--gris); }
.jz-chat__buscar svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jz-chat__buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 14px; outline: none; }
.jz-chat__cajas { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; scrollbar-width: none; }
.jz-chat__caja { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: #ececf0; color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.jz-chat__caja img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.jz-chat__caja i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orquidea); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; }
.jz-chat__caja[aria-pressed="true"] { background: var(--selva); color: #fff; }
.jz-chat__items { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 14px; overscroll-behavior: contain; }
.jz-chat__fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 16px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.jz-chat__fila:hover { background: #f0f0f3; }
.jz-chat__fila.es-activa { background: #e6e6eb; }
.jz-chat__av { position: relative; flex: none; }
.jz-chat__av .jz-av { width: 52px; height: 52px; border-radius: 18px; }
.jz-chat__linea { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: #2fbf71; }
.jz-chat__fila-txt { flex: 1; display: grid; min-width: 0; }
.jz-chat__fila-txt b { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__fila-txt small { overflow: hidden; color: var(--gris); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__fila.es-nueva b { font-weight: 800; }
.jz-chat__fila.es-nueva small { color: var(--tinta); font-weight: 700; }
.jz-chat__fila-meta { display: grid; justify-items: end; gap: 4px; flex: none; }
.jz-chat__fila-meta time { color: var(--gris); font-size: 12px; }
.jz-chat__fila.es-nueva time { color: var(--orquidea); font-weight: 700; }
.jz-chat__fila-meta i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orquidea); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; line-height: 20px; text-align: center; }
.jz-chat__vacio { display: grid; justify-items: center; gap: 6px; margin: 36px 18px; color: var(--gris); text-align: center; }
.jz-chat__vacio > svg { width: 46px; height: 46px; fill: none; stroke: var(--orquidea); stroke-width: 1.6; }
.jz-chat__vacio b { color: var(--tinta); font-family: var(--marca); font-weight: 600; font-size: 16px; }
.jz-chat__vacio p { max-width: 300px; margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
.jz-chat__vacio--conv { align-self: center; margin: auto; }
.jz-chat__convcab { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--linea); background: #fff; }
.jz-chat__quien { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px; border-radius: 14px; color: var(--tinta); text-decoration: none; }
.jz-chat__quien:hover { background: #f0f0f3; }
.jz-chat__quien .jz-av { width: 42px; height: 42px; border-radius: 15px; }
.jz-chat__quien > span:last-child { display: grid; min-width: 0; }
.jz-chat__quien b { overflow: hidden; font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__quien small { color: var(--gris); font-size: 12.5px; }
.jz-chat__quien small:not(:empty) { transition: color .2s; }
.jz-chat__convcab .jz-menu-card__caja a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.jz-chat__convcab .jz-menu-card__caja a:hover { background: var(--suave); }
.jz-chat__aviso { display: grid; gap: 6px; margin: 10px 12px 0; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 3px rgb(14 59 46 / 8%); font-size: 13.5px; }
.jz-chat__aviso span { color: var(--gris); }
.jz-chat__aviso div { display: flex; gap: 8px; }
.jz-chat__aviso--neg { display: flex; align-items: center; gap: 10px; background: #fbe3ef; color: var(--orquidea-hondo); box-shadow: none; }
.jz-chat__aviso--neg span { color: inherit; }
.jz-chat__msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 6px; overscroll-behavior: contain; }
.jz-chat__antes { display: block; margin: 4px auto 10px; padding: 6px 14px; border: 0; border-radius: 999px; background: #e6e6eb; color: var(--tinta); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.jz-chat__dia { display: flex; justify-content: center; margin: 14px 0 8px; }
.jz-chat__dia span { padding: 4px 12px; border-radius: 999px; background: rgb(14 59 46 / 7%); color: var(--gris); font-size: 12px; font-weight: 700; }
.jz-chat__dia span::first-letter { text-transform: uppercase; }
.jz-chat__b { position: relative; display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; }
.jz-chat__b.es-primera { margin-top: 8px; }
.jz-chat__b.es-mia { flex-direction: row-reverse; }
.jz-chat__bav { flex: none; width: 30px; }
.jz-chat__bav .jz-av { width: 30px; height: 30px; border-radius: 11px; font-size: 11px; }
.jz-chat__globo { display: grid; gap: 6px; max-width: min(78%, 460px); padding: 8px 12px 6px; border-radius: 6px 20px 20px 6px; background: #fff; color: var(--tinta); box-shadow: 0 1px 1.5px rgb(14 59 46 / 10%); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.jz-chat__b.es-primera .jz-chat__globo { border-top-left-radius: 20px; }
.jz-chat__b.es-ultima .jz-chat__globo { border-bottom-left-radius: 20px; }
.jz-chat__b.es-mia .jz-chat__globo { border-radius: 20px 6px 6px 20px; background: var(--selva); color: #fff; }
.jz-chat__b.es-mia.es-primera .jz-chat__globo { border-top-right-radius: 20px; }
.jz-chat__b.es-mia.es-ultima .jz-chat__globo { border-bottom-right-radius: 20px; }
.jz-chat__b.es-mia .jz-chat__globo a { color: var(--orquidea-claro); }
.jz-chat__texto { white-space: pre-wrap; }
.jz-chat__globo em { color: var(--gris); font-size: 14px; }
.jz-chat__b.es-mia .jz-chat__globo em { color: rgb(255 255 255 / 70%); }
.jz-chat__autor { color: var(--orquidea-claro); font-size: 11.5px; font-weight: 800; }
.jz-chat__hora { display: inline-flex; align-items: center; gap: 3px; justify-self: end; margin-top: -2px; color: var(--gris); font-size: 10.5px; }
.jz-chat__b.es-mia .jz-chat__hora { color: rgb(255 255 255 / 65%); }
.jz-tic { width: 16px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jz-chat__hora .es-visto { display: inline-flex; color: #7fe0ae; }
.jz-chat__b.es-error .jz-chat__globo { opacity: .65; }
.jz-chat__reintentar { position: absolute; right: 0; bottom: -18px; border: 0; background: none; color: var(--achiote); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.jz-chat__b.es-error { margin-bottom: 18px; }
.jz-chat__visto { margin: 2px 4px 0; color: var(--gris); font-size: 11.5px; text-align: right; }
.jz-chat__fotos { display: grid; gap: 3px; overflow: hidden; margin: -2px -6px 0; border-radius: 14px; }
.jz-chat__fotos--2, .jz-chat__fotos--4 { grid-template-columns: 1fr 1fr; }
.jz-chat__fotos--3 { grid-template-columns: 1fr 1fr; }
.jz-chat__fotos--3 a:first-child { grid-column: 1 / -1; }
.jz-chat__fotos img { display: block; width: 100%; max-height: 300px; aspect-ratio: auto; object-fit: cover; }
.jz-chat__fotos--2 img, .jz-chat__fotos--3 img, .jz-chat__fotos--4 img { aspect-ratio: 1; }
.jz-chat__producto { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: rgb(14 59 46 / 6%); color: inherit; text-decoration: none; }
.jz-chat__b.es-mia .jz-chat__producto { background: rgb(255 255 255 / 12%); }
.jz-chat__producto img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.jz-chat__producto span { display: grid; min-width: 0; }
.jz-chat__producto b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__mmenu { position: relative; align-self: center; opacity: 0; transition: opacity .12s; }
.jz-chat__b:hover .jz-chat__mmenu, .jz-chat__mmenu[open] { opacity: 1; }
.jz-chat__mmenu summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--gris); list-style: none; cursor: pointer; }
.jz-chat__mmenu summary::-webkit-details-marker { display: none; }
.jz-chat__mmenu summary:hover { background: #e6e6eb; }
.jz-chat__mmenu summary svg { width: 16px; height: 16px; fill: currentColor; }
.jz-chat__mmenu > div { position: absolute; bottom: 30px; z-index: 5; display: grid; min-width: 140px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgb(0 0 0 / 16%); }
.jz-chat__b.es-mia .jz-chat__mmenu > div { right: 0; }
.jz-chat__mmenu button { padding: 9px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.jz-chat__mmenu button:hover { background: var(--suave); }
@media (hover: none) { .jz-chat__mmenu { opacity: .55; } }
.jz-chat__escribe { display: inline-flex; gap: 4px; margin: 8px 0 4px 36px; padding: 12px 14px; border-radius: 20px; background: #fff; box-shadow: 0 1px 1.5px rgb(14 59 46 / 10%); }
.jz-chat__escribe span { width: 7px; height: 7px; border-radius: 50%; background: #a9b1ad; animation: jz-puntos 1.2s infinite; }
.jz-chat__escribe span:nth-child(2) { animation-delay: .15s; }
.jz-chat__escribe span:nth-child(3) { animation-delay: .3s; }
@keyframes jz-puntos { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.jz-chat__form { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #fff; }
.jz-chat__fila-form { display: flex; align-items: flex-end; gap: 4px; }
.jz-chat__fila-form .jz-icono { flex: none; width: 38px; height: 38px; color: var(--hoja); }
.jz-chat__fila-form .jz-icono svg { width: 22px; height: 22px; }
.jz-chat__fila-form textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; padding: 9px 14px; border: 0; border-radius: 20px; background: #f0f2ef; font: inherit; font-size: 15px; line-height: 1.4; resize: none; outline: none; }
.jz-chat__fila-form textarea:focus { background: #e9ece7; }
.jz-chat__enviar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--orquidea); color: #fff; cursor: pointer; transition: background .15s, transform .1s; }
.jz-chat__enviar:hover { background: var(--orquidea-hondo); }
.jz-chat__enviar:active { transform: scale(.92); }
.jz-chat__enviar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; margin-left: -2px; }
.jz-chat__adjuntos { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; }
.jz-chat__adjuntos > span { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: #f0f2ef; }
.jz-chat__adjuntos img { width: 100%; height: 100%; object-fit: cover; }
.jz-chat__adjuntos button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 60%); color: #fff; cursor: pointer; }
.jz-chat__adjuntos button svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; }
.jz-chat__adjuntos .es-subiendo { display: grid; place-items: center; }
.jz-chat__adjuntos .es-subiendo i { width: 22px; height: 22px; border: 3px solid #d9ddd8; border-top-color: var(--orquidea); border-radius: 50%; animation: jz-gira .8s linear infinite; }
@keyframes jz-gira { to { transform: rotate(360deg); } }
.jz-chat__bloqueo { padding: 14px; border-top: 1px solid var(--linea); background: #fff; color: var(--gris); font-size: 14px; text-align: center; }
.jz-chat__bloqueo button { border: 0; background: none; color: var(--hoja); font: inherit; font-weight: 700; cursor: pointer; }
.jz-chat__volver { flex: none; }
.jz-chat--pagina .jz-chat__volver { display: none; }
.jz-chatpag { height: calc(100vh - 150px); min-height: 480px; margin: 12px; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: var(--sombra); }
.jz-chat--pagina .jz-chat__lista { flex: 0 0 340px; border-right: 1px solid var(--linea); }
.jz-chat--pagina .jz-chat__conv:not([hidden]) { display: flex; }
@media (max-width: 860px) {
.jz-chatpag { height: calc(100vh - 170px); margin: 0 0 12px; border-radius: 0; }
.jz-chat--pagina .jz-chat__lista { flex: 1; border-right: 0; }
.jz-chat--pagina .jz-chat__conv { display: none !important; }
.jz-chat--pagina.con-conv .jz-chat__lista { display: none; }
.jz-chat--pagina.con-conv .jz-chat__conv { display: flex !important; }
.jz-chat--pagina .jz-chat__volver { display: grid; }
}
@media (min-width: 1024px) { .jz-chatpag { margin: 0; height: calc(100vh - 124px); } }
.jz-negocio__botones { display: flex !important; flex-wrap: wrap; }
.jz-negocio__botones .jz-btn { flex: 1 1 auto; }
.jz-chat__fila-form textarea:focus-visible, .jz-chat__buscar input:focus-visible { outline: none; }
/* ══ Negocio y productos en tonos suaves (estilo Apple) y página de producto (19/10/2026) ══ */
.jz .jz-negocio { position: relative; overflow: hidden; gap: 12px; margin: 12px; padding: 18px; border-radius: 28px; background: #fff; color: var(--tinta); box-shadow: var(--sombra); }
.jz-negocio__portada { margin: -18px -18px 0; height: 150px; overflow: hidden; background: #f5f5f7; }
.jz-negocio__portada img { width: 100%; height: 100%; object-fit: cover; }
.jz-negocio.con-portada .jz-negocio__id .jz-av { margin-top: -54px; border: 4px solid #fff; box-shadow: 0 6px 16px rgb(0 0 0 / 12%); }
.jz-negocio.con-portada .jz-negocio__estado { position: absolute; top: 14px; left: 14px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(6px); }
.jz .jz-negocio__estado { background: #e8f6ee; color: #1a7f4b; }
.jz .jz-negocio__estado.es-cerrado { background: #f5f5f7; color: #86868b; }
.jz .jz-negocio__id .jz-av { border: 1px solid #e5e5ea; background: #fff; color: var(--selva); }
.jz .jz-negocio__id h1 { color: #1d1d1f; }
.jz .jz-negocio__id p { color: #6e6e73; }
.jz .jz-negocio__cifras span { background: #f5f5f7; }
.jz .jz-negocio__cifras b { color: #1d1d1f; }
.jz .jz-negocio__cifras small { color: #6e6e73; }
.jz .jz-negocio__botones .jz-btn { border: 0; background: #ececf0; color: #1d1d1f !important; font-weight: 700; }
.jz .jz-negocio__botones .jz-btn:hover { background: #e0e0e5; }
.jz .jz-negocio__botones .jz-btn--orquidea { background: var(--orquidea); color: #fff !important; }
.jz .jz-negocio__botones .jz-btn--orquidea:hover { background: var(--orquidea-hondo); }
.jz .jz-negocio__botones .jz-btn--orquidea[aria-pressed="true"] { background: #ececf0; color: #1d1d1f !important; }
.jz .jz-pestanas { padding: 3px; border-radius: 12px; background: #ececf0; box-shadow: none; }
.jz .jz-pestanas button { min-height: 34px; border-radius: 9px; color: #3a3a3c; font-weight: 600; }
.jz .jz-pestanas button[aria-selected="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 4%); }
.jz-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; padding: 14px 12px; }
.jz-art { display: grid; align-content: start; gap: 3px; min-width: 0; color: #1d1d1f; text-decoration: none; }
.jz-art__foto { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden; border-radius: 16px; background: #f5f5f7; }
.jz-art__foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .25s; }
.jz-art:hover .jz-art__foto img { transform: scale(1.04); }
.jz-art__video { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(0 0 0 / 55%); }
.jz-art__video svg { width: 13px; height: 13px; fill: #fff; stroke: none; }
.jz-art__agotado { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 8px; background: rgb(29 29 31 / 80%); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 700; }
.jz-art__precio { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.jz-art__nombre { display: -webkit-box; overflow: hidden; color: #3a3a3c; font-size: 13.5px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 700px) { .jz-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jz-prods { padding: 16px 0; gap: 20px 14px; } }
/* Página de producto */
.jz-pp { display: grid; gap: 0; margin: 12px; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: var(--sombra); }
.jz-pp__galeria { display: grid; gap: 8px; padding: 12px; background: #fff; }
.jz-pp__foto { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: #f5f5f7; touch-action: pan-y; }
.jz-pp__foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.jz-pp__flecha { position: absolute; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); box-shadow: 0 2px 8px rgb(0 0 0 / 14%); cursor: pointer; }
.jz-pp__flecha svg { width: 18px; height: 18px; fill: none; stroke: #1d1d1f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jz-pp__flecha--izq { left: 10px; } .jz-pp__flecha--der { right: 10px; }
.jz-pp__cuenta { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: 999px; background: rgb(29 29 31 / 65%); color: #fff; font-size: 12px; font-weight: 700; }
.jz-pp__minis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.jz-pp__minis button { flex: none; width: 60px; height: 60px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: #f5f5f7; cursor: pointer; }
.jz-pp__minis button[aria-pressed="true"] { border-color: #1d1d1f; }
.jz-pp__minis img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.jz-pp__info { display: grid; align-content: start; gap: 12px; padding: 6px 18px 20px; }
.jz-pp__info h1 { margin: 0; color: #1d1d1f; font-family: var(--texto); font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.jz-pp__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; color: #1d1d1f; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.jz-pp__precio s { color: #86868b; font-size: 16px; font-weight: 500; }
.jz-pp__dcto { padding: 2px 8px; border-radius: 8px; background: #fbe3ef; color: var(--orquidea-hondo); font-size: 13px; font-weight: 800; }
.jz-pp__meta { margin: -4px 0 0; color: #6e6e73; font-size: 13.5px; }
.jz-pp__meta .es-disponible { color: #1a7f4b; font-weight: 700; }
.jz-pp__meta .es-agotado { color: var(--achiote); font-weight: 700; }
.jz-pp__acciones { display: flex; gap: 8px; }
.jz-pp__acciones .jz-btn { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: #ececf0; color: #1d1d1f !important; font-weight: 700; }
.jz-pp__acciones .jz-btn:hover { background: #e0e0e5; }
.jz-pp__acciones .jz-btn--orquidea { flex: 1.4; background: var(--orquidea); color: #fff !important; }
.jz-pp__acciones .jz-btn--orquidea:hover { background: var(--orquidea-hondo); }
.jz-pp__acciones .jz-btn--icono { flex: none; width: 44px; padding: 0; }
.jz-pp__acciones svg { width: 18px; height: 18px; }
.jz-pp__rapido { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: #f5f5f7; }
.jz-pp__rapido p { display: flex; align-items: center; gap: 8px; margin: 0; color: #1d1d1f; font-size: 14px; font-weight: 700; }
.jz-pp__rapido p svg { width: 18px; height: 18px; fill: none; stroke: var(--orquidea); stroke-width: 2; }
.jz-pp__rapido div { display: flex; gap: 8px; }
.jz-pp__rapido input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 14.5px; outline: none; }
.jz-pp__rapido input:focus { box-shadow: 0 0 0 2px rgb(14 59 46 / 20%); }
.jz-pp__rapido .jz-btn { min-height: 40px; border-radius: 12px; }
.jz-pp__desc h2, .jz-pp__vende h2 { margin: 6px 0 8px; color: #1d1d1f; font-family: var(--texto); font-size: 17px; font-weight: 700; }
.jz-pp__desc p { margin: 0; color: #3a3a3c; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.jz-pp__vende { padding-top: 12px; border-top: 1px solid #ececf0; }
.jz-pp__negocio { display: flex; align-items: center; gap: 10px; }
.jz-pp__negocio > a { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: #1d1d1f; text-decoration: none; }
.jz-pp__negocio .jz-av { width: 50px; height: 50px; border: 1px solid #e5e5ea; background: #fff; }
.jz-pp__negocio > a > span { display: grid; min-width: 0; }
.jz-pp__negocio b { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.jz-pp__negocio b .jz-sello { width: 15px; height: 15px; }
.jz-pp__negocio small { color: #6e6e73; font-size: 12.5px; }
.jz-pp__video { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--orquidea-hondo); font-weight: 700; text-decoration: none; }
.jz-pp__video svg { width: 14px; height: 14px; fill: currentColor; }
.jz-pp__mas { margin: 0 12px; }
.jz-pp__mas .jz-prods { padding-left: 0; padding-right: 0; }
@media (min-width: 1024px) {
.jz .jz-negocio, .jz-pp { margin: 0 0 14px; }
.jz-negocio__portada { height: 190px; }
.jz-pp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.jz-pp__galeria { padding: 16px; }
.jz-pp__info { padding: 22px 22px 22px 8px; }
.jz-pp__mas { margin: 0; }
}
.jz-chat__adj-prod { display: flex !important; align-items: center; gap: 8px; width: auto !important; max-width: 280px; padding: 6px 30px 6px 6px; }
.jz-chat__adj-prod img { flex: none; width: 52px !important; height: 52px !important; border-radius: 10px; object-fit: contain !important; background: #fff; }
.jz-chat__adj-prod > span { display: grid; min-width: 0; }
.jz-chat__adj-prod b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__adj-prod small { color: var(--gris); font-size: 12px; }
.jz-chat__producto img { object-fit: contain; background: #fff; }
.jz-pp__galeria { align-self: start; }
.jz-pp__info { min-width: 0; overflow-wrap: anywhere; }
.jz-pp__info h1 { font-size: 20px; }
@media (min-width: 1024px) { .jz-pp__galeria { position: sticky; top: 76px; } }
.jz-pp, .jz-pp__info, .jz-pp__galeria { grid-template-columns: minmax(0, 1fr); }
.jz-pp__rapido div, .jz-pp__acciones { min-width: 0; }
@media (min-width: 1024px) { .jz-pp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.jz-pp__galeria { align-content: start; }
.jz-pp__acciones .jz-btn { min-width: 0; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jz-pp__acciones .jz-btn--icono { padding: 0; }
.jz-pp { overflow: clip; }
/* Chat: ventanita flotante, no todo el alto (19/10/2026) */
@media (min-width: 521px) {
.jz-cajon[data-cual="chat"] .jz-cajon__fondo { background: transparent !important; }
.jz-cajon[data-cual="chat"] .jz-cajon__caja { top: 72px; bottom: auto; left: 16px; width: 380px; height: min(560px, calc(100vh - 92px)); border-radius: 22px; box-shadow: 0 18px 50px rgb(10 25 20 / 28%), 0 0 0 1px rgb(10 25 20 / 6%); transform: translateY(-10px) scale(.97); opacity: 0; transform-origin: 20% 0; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .16s; }
.jz-cajon--abierto[data-cual="chat"] .jz-cajon__caja { transform: none; opacity: 1; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab { padding: 12px 12px 4px 18px; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab h2 { font-size: 17px; }
.jz-cajon[data-cual="chat"] .jz-chat__av .jz-av { width: 44px; height: 44px; border-radius: 15px; }
.jz-cajon[data-cual="chat"] .jz-chat__fila { padding: 7px 8px; }
.jz-cajon[data-cual="chat"] .jz-chat__quien .jz-av { width: 36px; height: 36px; border-radius: 12px; }
.jz-cajon[data-cual="chat"] .jz-chat__convcab { padding: 6px 8px; }
.jz-cajon[data-cual="chat"] .jz-chat__globo { font-size: 14.5px; }
.jz-chat--cajon .jz-chat__cab { top: 10px; right: 56px; }
}
@media (min-width: 1280px) { .jz-cajon[data-cual="chat"] .jz-cajon__caja { left: 24px; } }
.jz-chat__herr { display: inline-flex; gap: 4px; }
.jz-chat__herr .jz-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-chat__herr [data-jz-chat-sonido][aria-pressed="false"] { color: #86868b; }
@media (min-width: 521px) { .jz-chat--cajon .jz-chat__cab { right: 52px; } }
/* Chat acoplado abajo a la izquierda, delgado y sin bloquear la página (19/10/2026) */
@media (min-width: 521px) {
.jz-cajon[data-cual="chat"] { pointer-events: none; }
.jz-cajon[data-cual="chat"] .jz-cajon__fondo { display: none; }
.jz-cajon[data-cual="chat"] .jz-cajon__caja { pointer-events: auto; top: auto; bottom: 0; left: 24px; width: 336px; height: min(470px, calc(100vh - 80px)); border-radius: 16px 16px 0 0; box-shadow: 0 -2px 24px rgb(10 25 20 / 18%), 0 0 0 1px rgb(10 25 20 / 8%); transform: translateY(24px); transform-origin: 50% 100%; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab { padding: 8px 8px 2px 14px; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab h2 { font-size: 15px; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab .jz-icono { width: 32px; height: 32px; }
.jz-chat--cajon .jz-chat__cab { top: 6px; right: 46px; }
.jz-chat--cajon .jz-chat__herr .jz-icono { width: 32px; height: 32px; }
.jz-chat--cajon .jz-chat__herr .jz-icono svg { width: 17px; height: 17px; }
.jz-chat--cajon .jz-chat__buscar { height: 34px; margin: 4px 10px 6px; }
.jz-chat--cajon .jz-chat__cajas { padding: 0 10px 6px; }
.jz-chat--cajon .jz-chat__caja { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.jz-chat--cajon .jz-chat__av .jz-av { width: 40px; height: 40px; border-radius: 14px; }
.jz-chat--cajon .jz-chat__fila-txt b { font-size: 14px; }
.jz-chat--cajon .jz-chat__fila-txt small { font-size: 12.5px; }
.jz-chat--cajon .jz-chat__convcab { padding: 4px 6px; }
.jz-chat--cajon .jz-chat__convcab .jz-icono { width: 32px; height: 32px; }
.jz-chat--cajon .jz-chat__quien .jz-av { width: 32px; height: 32px; border-radius: 11px; }
.jz-chat--cajon .jz-chat__quien b { font-size: 14px; }
.jz-chat--cajon .jz-chat__quien small { font-size: 11.5px; }
.jz-chat--cajon .jz-chat__msgs { padding: 8px 10px 4px; }
.jz-chat--cajon .jz-chat__globo { max-width: 82%; padding: 6px 10px 5px; font-size: 14px; }
.jz-chat--cajon .jz-chat__fotos img { max-height: 190px; }
.jz-chat--cajon .jz-chat__bav, .jz-chat--cajon .jz-chat__bav .jz-av { width: 26px; height: 26px; }
.jz-chat--cajon .jz-chat__form { padding: 6px 8px 8px; }
.jz-chat--cajon .jz-chat__fila-form .jz-icono, .jz-chat--cajon .jz-emoji-btn { width: 32px; height: 32px; }
.jz-chat--cajon .jz-chat__fila-form textarea { min-height: 36px; padding: 7px 12px; font-size: 14px; }
.jz-chat--cajon .jz-chat__enviar { width: 36px; height: 36px; }
}
@media (min-width: 521px) { .jz-cajon.jz-cajon--abierto[data-cual="chat"] .jz-cajon__caja { transform: none; opacity: 1; } }
/* (20/10/2026: el chat va a la derecha, bajo su ícono; ver al final) */
/* ── Visor de fotos (19/10/2026) ── */
.jz-visor { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr; background: rgb(8 10 9 / 96%); color: #fff; opacity: 0; transition: opacity .18s; }
.jz-visor.es-abierto { opacity: 1; }
.jz-visor__cab { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.jz-visor__cab [data-jz-visor-titulo] { flex: 1; overflow: hidden; font-weight: 700; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.jz-visor__cuenta { color: rgb(255 255 255 / 70%); font-size: 13.5px; font-weight: 600; }
.jz-visor__boton { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; transition: background .15s; }
.jz-visor__boton:hover { background: rgb(255 255 255 / 22%); }
.jz-visor__boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-visor__escena { display: grid; place-items: center; min-height: 0; padding: 0 12px 16px; cursor: zoom-out; }
.jz-visor__escena img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; cursor: default; box-shadow: 0 10px 40px rgb(0 0 0 / 40%); animation: jz-visor-entra .2s ease-out; }
@keyframes jz-visor-entra { from { transform: scale(.96); opacity: 0; } }
.jz-visor__flecha { position: absolute; top: 50%; display: none; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 14%); color: #fff; cursor: pointer; transition: background .15s; }
.jz-visor.es-varias .jz-visor__flecha { display: grid; }
.jz-visor__flecha:hover { background: rgb(255 255 255 / 26%); }
.jz-visor__flecha svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jz-visor__flecha--izq { left: 16px; } .jz-visor__flecha--der { right: 16px; }
@media (max-width: 700px) { .jz-visor__flecha { display: none !important; } .jz-visor__escena { padding: 0 0 12px; } .jz-visor__escena img { border-radius: 0; } }
.jz-fotos a, .jz-chat__fotos a { cursor: zoom-in; }
.jz-visor { background: #0b0d0c; }
/* ══ Estilo puro (19/10/2026): fondo neutro, menos sombra, botones sin borde ══ */
:root {
--fondo: #f2f2f4;
--suave: #f5f5f7;
--linea: #e6e6ea;
--tinta: #111113;
--gris: #6e6e73;
--sombra: 0 0 0 1px rgb(0 0 0 / 4%), 0 1px 3px rgb(0 0 0 / 5%);
}
body.jz { letter-spacing: -.005em; }
.jz .jz-card { border-radius: 20px; }
.jz .jz-escribir { border-radius: 18px; }
.jz .jz-lado section, .jz-izq__tarjeta { border-radius: 20px !important; }
/* Pestañas de la plaza: texto limpio, la elegida en negro suave */
.jz .jz-chip { min-height: 34px; border: 0; background: #e8e8ed; color: #1d1d1f; font-weight: 600; }
.jz .jz-chip:hover { background: #dcdce1; }
.jz .jz-chip[aria-pressed="true"] { background: #1d1d1f; color: #fff; }
/* Acciones de la tarjeta: sin bordes, como en las apps */
.jz .jz-card__pie { gap: 2px; padding: 4px 8px 8px; }
.jz .jz-card__pie .jz-btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #3a3a3c; font-weight: 600; }
.jz .jz-card__pie .jz-btn:hover { background: #f2f2f4; }
.jz .jz-card__pie .jz-btn.jz-reac.es-on { background: transparent; }
.jz .jz-card__pie .jz-btn.jz-reac.es-on:hover { background: color-mix(in srgb, var(--rc) 8%, #fff); }
.jz .jz-card__pie .jz-btn svg { width: 20px; height: 20px; }
.jz .jz-card__pie .jz-pedir.jz-btn--orquidea { background: var(--orquidea); color: #fff; }
.jz .jz-card__cuentas { margin: 0 16px; border-color: #ededf0; }
.jz .jz-card__cab b { font-weight: 700; }
/* ══ Videos con aire TikTok, identidad PLAZUNI (19/10/2026) ══ */
/* En la plaza: el video llena la tarjeta, vertical, fondo negro */
.jz .jz-video-mini { aspect-ratio: 9 / 13; max-height: 620px; margin: 12px 0 0; background: #000; }
.jz .jz-video-mini img { object-fit: cover; }
.jz .jz-video-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 45%)); pointer-events: none; }
.jz .jz-video-mini span { z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: rgb(255 255 255 / 22%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(255 255 255 / 30%); transition: transform .15s; }
.jz .jz-video-mini:hover span { transform: translate(-50%, -50%) scale(1.08); }
.jz .jz-video-mini svg { width: 30px; height: 30px; margin-left: 4px; }
@media (min-width: 1024px) { .jz .jz-video-mini { width: min(100%, 440px); margin: 12px auto 0; border-radius: 16px; } }
/* Recuadro «Ver» de la columna derecha: negro, no verde */
.jz .jz-lado section.jz-lado__videos { background: #111113; }
/* Ver: negro puro, acciones apiladas a la derecha */
.jz .jz-ver { background: #000; }
.jz .jz-ver__pestanas { background: rgb(255 255 255 / 10%); }
.jz .jz-ver__pestanas button[aria-pressed="true"] { background: #fff; color: #000; }
.jz .jz-clip { border-radius: 22px; }
.jz .jz-clip__texto { right: 84px; bottom: 96px; }
.jz .jz-clip__texto p { font-size: 14.5px; line-height: 1.4; text-shadow: 0 1px 2px rgb(0 0 0 / 50%); }
.jz .jz-clip__acciones { left: auto; right: 8px; bottom: 96px; flex-direction: column; align-items: center; gap: 14px; }
.jz .jz-clip__acciones > .jz-btn, .jz .jz-clip__acciones .jz-reac-caja > .jz-btn { flex-direction: column; gap: 3px; width: 58px; min-height: 0; padding: 0; background: none; backdrop-filter: none; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 2px rgb(0 0 0 / 60%); }
.jz .jz-clip__acciones .jz-btn svg, .jz .jz-clip__acciones .jz-reac__e { display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: rgb(255 255 255 / 16%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); fill: none; stroke: #fff; font-size: 24px; text-shadow: none; }
.jz .jz-clip__acciones .jz-btn.es-on { background: none; color: #fff; }
.jz .jz-clip__acciones .jz-btn.es-on .jz-reac__e { background: rgb(194 54 122 / 45%); }
.jz .jz-clip__acciones .jz-btn:not(:has(svg, .jz-reac__e))::before { content: none; }
.jz .jz-clip__seguir { top: 28px; }
.jz .jz-clip__bandeja { border-radius: 16px; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.jz .jz-clip__bandeja .jz-btn--selva { background: var(--orquidea); }
/* ══ Llamadas y videollamadas (19/10/2026) ══ */
.jz-chat__llamar { flex: none; color: var(--hoja); }
.jz-chat__llamar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.jz-llamada { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 30%, #1d4a3c 0%, #0b1f19 55%, #050a08 100%); }
.jz-llamada__remoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.jz-llamada.es-video.es-encurso .jz-llamada__remoto { opacity: 1; }
.jz-llamada:not(.es-video) .jz-llamada__remoto { width: 1px; height: 1px; }
.jz-llamada__centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; margin-top: -12vh; text-align: center; }
.jz-llamada.es-video.es-encurso .jz-llamada__centro { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 18px; justify-items: start; gap: 2px; margin: 0; text-align: left; text-shadow: 0 1px 3px rgb(0 0 0 / 60%); }
.jz-llamada.es-video.es-encurso .jz-llamada__av { display: none; }
.jz-llamada__av .jz-av { width: 120px !important; height: 120px !important; border-radius: 42px !important; font-size: 40px !important; border: 0 !important; margin: 0 !important; }
.jz-llamada.es-sonando .jz-llamada__av, .jz-llamada.es-llamando .jz-llamada__av { animation: jz-latido 1.6s ease-in-out infinite; border-radius: 46px; }
@keyframes jz-latido { 0%, 100% { box-shadow: 0 0 0 0 rgb(194 54 122 / 55%); } 50% { box-shadow: 0 0 0 22px rgb(194 54 122 / 0%); } }
.jz-llamada__centro b { margin-top: 10px; font-family: var(--marca); font-weight: 600; font-size: 24px; letter-spacing: -.01em; }
.jz-llamada__centro small { color: rgb(255 255 255 / 75%); font-size: 15px; font-variant-numeric: tabular-nums; }
.jz-llamada__local { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); z-index: 2; width: min(26vw, 200px); aspect-ratio: 3 / 4; border-radius: 18px; object-fit: cover; background: #111; box-shadow: 0 8px 30px rgb(0 0 0 / 45%); transform: scaleX(-1); }
.jz-llamada:not(.es-video) .jz-llamada__local, .jz-llamada.sin-cam .jz-llamada__local { display: none; }
.jz-llamada.es-video.es-llamando .jz-llamada__local, .jz-llamada.es-video.es-conectando .jz-llamada__local { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; z-index: 0; opacity: .55; }
.jz-llamada__barra { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 18px; padding: 12px 18px; border-radius: 999px; background: rgb(0 0 0 / 35%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateX(-50%); }
.jz-llamada.es-sonando .jz-llamada__barra { gap: 70px; background: none; backdrop-filter: none; }
.jz-llamada__b { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.jz-llamada__b svg { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: rgb(255 255 255 / 18%); fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: background .15s, transform .1s; }
.jz-llamada__b:hover svg { background: rgb(255 255 255 / 28%); }
.jz-llamada__b:active svg { transform: scale(.92); }
.jz-llamada__b[aria-pressed="true"] svg { background: #fff; stroke: #111; }
.jz-llamada__b.es-rojo svg { background: #e5383b; fill: #fff; stroke: none; }
.jz-llamada__b.es-rojo:hover svg { background: #c92a2d; }
.jz-llamada__b.es-verde svg { background: #2fbf71; }
.jz-llamada__b.es-verde svg path, .jz-llamada__b.es-verde svg rect { fill: none; }
.jz-llamada.es-sonando .jz-llamada__b svg { width: 68px; height: 68px; padding: 19px; }
.jz-llamada.es-sonando .jz-llamada__b.es-verde svg { animation: jz-timbre 1s ease-in-out infinite; }
@keyframes jz-timbre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } }
.jz-llamada__b span { color: rgb(255 255 255 / 85%); }
@media (max-width: 520px) { .jz-llamada__barra { gap: 12px; padding: 10px 14px; } .jz-llamada__b svg { width: 52px; height: 52px; padding: 14px; } .jz-llamada__b span { display: none; } .jz-llamada.es-sonando .jz-llamada__b span { display: block; } }
@media (prefers-reduced-motion: reduce) { .jz-llamada__av, .jz-llamada__b svg { animation: none !important; } }
.jz-llamada:not(.con-local) .jz-llamada__local { display: none; }
/* ── App instalable (19/10/2026) ── */
.jz-izq__instalar .jz-izq__icono img { width: 26px; height: 26px; border-radius: 8px; }
.jz-izq__instalar { color: var(--orquidea-hondo) !important; }
.jz-franja-app { position: fixed; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 26; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 10px; border-radius: 18px; background: #fff; color: var(--tinta); box-shadow: 0 10px 30px rgb(0 0 0 / 18%), 0 0 0 1px rgb(0 0 0 / 5%); animation: jz-sube .3s cubic-bezier(.2, .8, .2, 1); }
.jz-franja-app > img { flex: none; width: 42px; height: 42px; border-radius: 12px; }
.jz-franja-app > span { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.jz-franja-app b { font-size: 14.5px; }
.jz-franja-app small { color: var(--gris); font-size: 12.5px; }
.jz-franja-app .jz-btn { min-height: 36px; padding: 0 16px; border-radius: 12px; }
.jz-franja-app .jz-icono { width: 32px; height: 32px; color: var(--gris); }
.jz-ios { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.jz-ios li { display: flex; align-items: flex-start; gap: 12px; }
.jz-ios li > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--orquidea); color: #fff; font-weight: 800; }
.jz-ios p { margin: 4px 0 0; line-height: 1.5; }
.jz-ios svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: #0a84ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Abierta como app: respeta la muesca del celular */
@media (display-mode: standalone) { .jz-barra { padding-top: max(10px, env(safe-area-inset-top)); } }
/* ── Mapa inteligente: pines agrupados (19/10/2026) ── */
.jz-pinmapa { position: relative; display: grid; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.jz-pinmapa > span { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 2.5px solid #fff; border-radius: 50%; background: var(--selva); color: #fff; font-size: 10.5px; font-weight: 800; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); transition: transform .15s; }
.jz-pinmapa.con-logo > span { width: 40px; height: 40px; background: #fff; }
.jz-pinmapa.es-premium > span { width: 46px; height: 46px; border-color: var(--orquidea); }
.jz-pinmapa.es-abierto > span { box-shadow: 0 0 0 2.5px #2fbf71, 0 2px 8px rgb(0 0 0 / 25%); }
.jz-pinmapa > span img { width: 100%; height: 100%; object-fit: contain; }
.jz-pinmapa:hover > span { transform: scale(1.12); }
.jz-pinmapa em { position: absolute; top: calc(100% + 3px); max-width: 130px; overflow: hidden; padding: 2px 7px; border-radius: 8px; background: rgb(255 255 255 / 94%); color: #1d1d1f; font-size: 11.5px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 1px 4px rgb(0 0 0 / 18%); }
.jz-pinmapa--grupo { place-items: center; width: var(--t); height: var(--t); border: 3px solid #fff; border-radius: 50%; background: var(--orquidea); box-shadow: 0 0 0 5px rgb(194 54 122 / 25%), 0 3px 10px rgb(0 0 0 / 25%); transition: transform .15s; }
.jz-pinmapa--grupo:hover { transform: scale(1.08); }
.jz-pinmapa--grupo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; opacity: .18; }
.jz-pinmapa--grupo b { position: relative; color: #fff; font-size: 15px; font-weight: 800; }
.jz-pinmapa--grupo i { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #2fbf71; }
.jz-mapa { position: relative; background: #eceae4; }
.jz-mapa--cargando::after { content: "Cargando mapa…"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: linear-gradient(110deg, #eceae4 30%, #f5f4f0 50%, #eceae4 70%) 0 0 / 300% 100%; color: #6e6e73; font-size: 14px; font-weight: 600; animation: jz-brillo 1.4s linear infinite; pointer-events: none; }
@keyframes jz-brillo { to { background-position: -150% 0; } }
/* ── Página del negocio como perfil de red social (19/10/2026) ──
Portada ancha, logo redondo encima, nombre y cifras, botones a la
derecha y pestañas; debajo, detalles y vitrina a la izquierda y lo
publicado a la derecha. En computadora ocupa todo el ancho. */
.jz-np { margin: 0 0 12px; background: #fff; box-shadow: var(--sombra); }
.jz-np__portada { position: relative; aspect-ratio: 16 / 7; max-height: 420px; overflow: hidden; background:
radial-gradient(circle at 85% 20%, rgb(194 54 122 / 55%) 0 90px, transparent 91px),
radial-gradient(circle at 12% 110%, rgb(214 64 42 / 35%) 0 120px, transparent 121px),
linear-gradient(135deg, #0e3b2e, #155741 60%, #0a2a20); }
.jz-np__portada img { width: 100%; height: 100%; object-fit: cover; }
.jz-np__cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 16px 14px; }
.jz-av.jz-np__logo { position: relative; z-index: 1; width: 112px; height: 112px; margin-top: -56px; border: 4px solid #fff; border-radius: 50%; background: #fff; color: var(--selva); font-family: var(--marca); font-size: 34px; box-shadow: 0 2px 10px rgb(14 59 46 / 14%); }
.jz-np__logo img { width: 100%; height: 100%; object-fit: contain; }
.jz-np__nombre h1 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: var(--marca); font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.jz-np__nombre h1 .jz-sello { flex: none; width: 22px; height: 22px; }
.jz-np__cifras { margin: 6px 0 0; color: var(--gris); font-size: 14.5px; }
.jz-np__cifras b { color: var(--tinta); }
.jz-np__linea { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; color: var(--gris); font-size: 14px; }
.jz-np__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jz-np__botones > .jz-btn { flex: 1 1 40%; min-width: 0; min-height: 42px; border-radius: 12px; }
.jz-np__botones .jz-btn { font: inherit; font-size: 15px; font-weight: 700; }
.jz-np__portada.con-foto { background: #fff; }
.jz-np__botones svg, .jz-np__menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-np__botones .jz-btn--orquidea svg { stroke: #fff; }
.jz-np__gris { border-color: transparent; background: #e8e8ed; color: var(--tinta); }
.jz-np__gris:hover { background: #dcdce2; }
.jz-np__botones [data-jz-crear] svg { stroke-width: 6; }
.jz-np__mas { position: relative; flex: none; }
.jz-np__mas summary { width: 46px; min-height: 42px; padding: 0; border-radius: 12px; list-style: none; }
.jz-np__mas summary::-webkit-details-marker { display: none; }
.jz-np__mas summary svg { fill: currentColor; stroke: none; }
.jz-np__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 250px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgb(10 25 20 / 18%); }
.jz-np__menu a, .jz-np__menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--tinta); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.jz-np__menu a:hover, .jz-np__menu button:hover { background: var(--suave); }
.jz-np__tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
.jz-np__tabs::-webkit-scrollbar { display: none; }
.jz-np__tabs button { position: relative; flex: none; min-height: 50px; padding: 0 14px; border: 0; background: none; color: var(--gris); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.jz-np__tabs button:hover { color: var(--tinta); }
.jz-np__tabs button[aria-selected="true"] { color: var(--orquidea); }
.jz-np__tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--orquidea); }
.jz-np__inicio { display: grid; gap: 12px; }
.jz-np__izq { display: grid; gap: 12px; align-content: start; }
.jz-np__caja { margin: 0 12px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: var(--sombra); }
.jz-np__caja header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.jz-np__caja h2, .jz-np__titulo { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 17px; }
.jz-np__caja > h2 { margin-bottom: 12px; }
.jz-np__caja header button { padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--orquidea); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.jz-np__caja header button:hover { background: #fbe3ef; }
.jz-np__datos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.jz-np__datos li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; }
.jz-np__datos svg { flex: none; width: 22px; height: 22px; margin-top: -1px; fill: none; stroke: var(--gris); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jz-np__datos a { color: var(--hoja); font-weight: 600; text-decoration: none; }
.jz-np__datos a:hover { text-decoration: underline; }
.jz-np__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: hidden; border-radius: 14px; }
.jz-np__fotos a { display: block; aspect-ratio: 1; background: #f4f5f2; }
.jz-np__fotos img { width: 100%; height: 100%; object-fit: cover; }
.jz-np__fotos a:hover img { opacity: .9; }
.jz-np__escribir { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 0 12px; padding: 12px 14px; border: 0; border-radius: 22px; background: #fff; color: var(--gris); font: inherit; font-size: 15px; text-align: left; box-shadow: var(--sombra); cursor: pointer; }
.jz-np__escribir > span:last-child { flex: 1; min-width: 0; padding: 10px 16px; overflow: hidden; border-radius: 999px; background: var(--suave); text-overflow: ellipsis; white-space: nowrap; }
.jz-np__escribir .jz-av { border-radius: 50%; }
.jz-np__escribir .jz-av img { object-fit: contain; background: #fff; }
.jz-np__titulo { margin: 4px 16px 0; }
.jz-np__muro { display: grid; gap: 12px; align-content: start; min-width: 0; }
.jz-np__muro .jz-lista { padding-top: 0; }
@media (min-width: 700px) {
.jz-np__cab { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0 18px; padding: 0 24px 16px; }
.jz-av.jz-np__logo { width: 160px; height: 160px; margin-top: -48px; font-size: 48px; }
.jz-np__nombre { padding-bottom: 6px; }
.jz-np__nombre h1 { font-size: 30px; }
.jz-np__botones { flex-wrap: nowrap; margin: 0 0 8px; }
.jz-np__botones > .jz-btn { flex: none; padding: 0 16px; }
.jz-np__tabs { margin: 0 16px; padding: 0; }
}
@media (min-width: 1024px) {
/* Una sola columna ancha y centrada, como un perfil. */
.jz-en-negocio .jz-marco { grid-template-columns: minmax(0, 1100px); padding-top: 0; }
.jz-en-negocio .jz-marco > :not(.jz-main) { display: none !important; }
.jz-np { margin: 0 0 16px; border-radius: 0 0 28px 28px; overflow: visible; }
.jz-np__portada { border-radius: 0 0 24px 24px; }
.jz-np__inicio { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.jz-np__izq { position: sticky; top: 88px; }
.jz-np__caja, .jz-np__escribir { margin: 0; width: 100%; }
.jz-np__titulo { margin: 4px 4px 0; }
.jz-np__solo { max-width: 680px; margin: 0 auto; }
}
/* ── Amigos en el perfil de persona (19/10/2026) ── */
.jz-amistad { display: contents; }
.jz-amistad svg, .jz-amigos-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-amigos-menu { position: relative; }
.jz-amigos-menu summary { list-style: none; min-height: 42px; padding: 0 18px; border-color: transparent; border-radius: 14px; background: #ececf0; color: var(--tinta); font-weight: 700; }
.jz-amigos-menu summary::-webkit-details-marker { display: none; }
.jz-amigos-menu > div { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgb(10 25 20 / 18%); }
.jz-amigos-menu > div button { width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--achiote); font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; }
.jz-amigos-menu > div button:hover { background: var(--suave); }
.jz-perfil__cifras--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jz-globo { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: var(--orquidea); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; line-height: 1; }
[data-jz-seccion="yo"], [data-jz-yo] { position: relative; }
.jz-perfil__solicitudes { margin: 0 12px 12px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: var(--sombra); }
.jz-perfil__solicitudes h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--marca); font-weight: 600; font-size: 16px; }
.jz-perfil__solicitudes h2 span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fbe3ef; color: var(--orquidea-hondo); font-family: var(--texto); font-size: 13px; font-weight: 800; }
.jz-solicitudes { display: grid; gap: 4px; }
.jz-solicitud { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 8px 0; }
.jz-solicitud > a { grid-row: span 2; text-decoration: none; }
.jz-solicitud .jz-av { width: 56px; height: 56px; border-radius: 50%; font-size: 18px; }
.jz-solicitud__texto { display: grid; min-width: 0; }
.jz-solicitud__texto a { color: var(--tinta); text-decoration: none; }
.jz-solicitud__texto b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.jz-solicitud__texto small, .jz-solicitud__botones small { color: var(--gris); font-size: 13px; }
.jz-solicitud__botones { display: flex; gap: 8px; }
.jz-solicitud__botones .jz-btn { flex: 1; min-height: 38px; border-radius: 12px; font-size: 14px; }
.jz-solicitud__botones .jz-btn:not(.jz-btn--orquidea) { border-color: transparent; background: #ececf0; }
@media (min-width: 1024px) {
.jz-perfil__solicitudes { margin: 0 0 14px; }
.jz-solicitud { grid-template-columns: auto minmax(0, 1fr) auto; }
.jz-solicitud > a { grid-row: auto; }
.jz-solicitud__botones .jz-btn { flex: none; padding: 0 18px; }
}
/* ── Accesos directos en la barra y provincias en Negocios (19/10/2026) ── */
.jz-atajos { display: none; }
@media (min-width: 1024px) {
.jz-atajos { display: flex; align-items: stretch; gap: 0; margin: -12px auto; align-self: stretch; }
.jz-atajos a { position: relative; display: grid; place-items: center; width: 60px; border-radius: 0; color: rgb(255 255 255 / 70%); transition: color .15s, background .15s; }
.jz-atajos a::before { content: ""; position: absolute; inset: 8px 4px; border-radius: 12px; transition: background .15s; }
.jz-atajos a:hover { color: #fff; }
.jz-atajos a:hover::before { background: rgb(255 255 255 / 9%); }
.jz-atajos a[aria-current="page"] { color: #fff; }
.jz-atajos a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--orquidea); }
.jz-atajos svg { position: relative; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-atajos a[aria-current="page"] svg { stroke-width: 2.3; }
.jz-barra .jz-buscar { flex: 0 1 340px; }
.jz-barra__acciones { margin-left: 0; }
}
@media (min-width: 1024px) and (max-width: 1180px) { .jz-atajos a { width: 52px; } .jz-barra .jz-buscar { flex-basis: 260px; } }
.jz-dir-cab--fotos { position: relative; overflow: hidden; min-height: 230px; align-content: end; background: var(--selva); }
.jz-dir-cab__fotos { position: absolute; inset: 0; }
.jz-dir-cab__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.jz-dir-cab__fotos img.es-activa { opacity: 1; }
.jz-dir-cab__fotos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 30 22 / 15%) 0%, rgb(10 30 22 / 35%) 45%, rgb(10 30 22 / 85%) 100%); }
.jz-dir-cab--fotos > :not(.jz-dir-cab__fotos) { position: relative; z-index: 1; }
.jz-dir-cab--fotos::before, .jz-dir-cab--fotos::after { display: none !important; }
.jz-dir-cab__lema { display: block; margin-top: 4px; color: rgb(255 255 255 / 88%); font-size: 14px; font-weight: 600; }
.jz-dir-provs { display: flex; gap: 8px; overflow-x: auto; margin: 6px -4px 0; padding: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.jz-dir-provs::-webkit-scrollbar { display: none; }
.jz-dir-provs button { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 16%); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; backdrop-filter: blur(8px); cursor: pointer; transition: background .15s; }
.jz-dir-provs button:hover { background: rgb(255 255 255 / 26%); }
.jz-dir-provs button[aria-pressed="true"] { background: #fff; color: var(--selva); }
@media (min-width: 1024px) {
.jz-dir-cab--fotos { grid-template-columns: minmax(0, 1fr); min-height: 300px; }
.jz-dir-provs { padding-right: 40px; }
}
/* Negocios a todo lo ancho (hasta 1500 px), sin columnas a los costados. */
@media (min-width: 1024px) {
.jz-en-directorio .jz-marco { grid-template-columns: minmax(0, 1500px); }
.jz-en-directorio .jz-marco > :not(.jz-main) { display: none !important; }
.jz-en-directorio .jz-dir-cab--fotos { min-height: 380px; padding: 36px 40px; }
.jz-en-directorio .jz-dir-cab__texto h1 { font-size: 44px; }
.jz-en-directorio .jz-dir-grilla { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
}
/* ── Estilo puro (19/10/2026): pedido del usuario, «mucho color, ese rosado;
usa plomo, semiblanco». Casi negro y plomo en vez de verde y orquídea;
el verde y el rojo quedan solo para «Abierto»/«Cerrado» y avisos. ── */
:root {
--selva: #1d1d1f;
--selva-2: #000;
--hoja: #1d1d1f;
--orquidea: #1d1d1f;
--orquidea-hondo: #000;
--orquidea-claro: #8e8e93;
--fondo: #f2f2f4;
--suave: #f5f5f7;
--linea: #e5e5ea;
--gris: #6e6e73;
--plomo: #e8e8ed;
--plomo-2: #dcdce1;
--sombra: 0 1px 2px rgb(0 0 0 / 5%), 0 6px 20px rgb(0 0 0 / 5%);
}
body.jz { background: var(--fondo); }
/* Barra de arriba: blanca, como las redes. */
.jz-barra { background: #fff; color: var(--tinta); box-shadow: 0 1px 0 var(--linea); }
.jz-logo { color: var(--tinta) !important; }
.jz-logo span { color: var(--tinta); }
.jz-zona, .jz-ciudad select { background-color: var(--suave); color: var(--tinta); }
.jz-zona:hover, .jz-zona[aria-expanded="true"] { background: var(--plomo); }
.jz-zona > svg:first-child { stroke: var(--gris); }
.jz-zona__flecha { stroke: var(--tinta) !important; }
.jz-barra__icono, .jz-yo { background: var(--suave); color: var(--tinta) !important; }
.jz-barra__icono:hover { background: var(--plomo); }
.jz-barra__icono[aria-expanded="true"] { background: var(--tinta); color: #fff !important; }
.jz-yo.jz-yo--entrar { background: var(--plomo); color: var(--tinta) !important; }
@media (min-width: 1024px) {
.jz-buscar { background: var(--suave); color: var(--gris); }
.jz-buscar:focus-within { background: #fff; box-shadow: 0 0 0 1.5px var(--linea); }
.jz-buscar input { color: var(--tinta); }
.jz-buscar input::placeholder { color: var(--gris); }
.jz-atajos a { color: #8a8a8e; }
.jz-atajos a:hover, .jz-atajos a[aria-current="page"] { color: var(--tinta); }
.jz-atajos a:hover::before { background: var(--suave); }
.jz-atajos a[aria-current="page"]::after { background: var(--tinta); }
.jz-menu a[aria-current="page"] { background: var(--plomo); color: var(--tinta); }
}
/* Botones: uno solo oscuro por pantalla (Crear); los demás en plomo. */
.jz-btn--orquidea, .jz-btn--selva { background: var(--plomo); color: var(--tinta) !important; }
.jz-btn--orquidea:hover, .jz-btn--selva:hover { background: var(--plomo-2); }
.jz-btn--orquidea svg, .jz-btn--selva svg { stroke: currentColor !important; }
.jz-barra .jz-btn--orquidea, .jz-izq__entrar .jz-btn--orquidea { background: var(--tinta); color: #fff !important; }
.jz-barra .jz-btn--orquidea:hover, .jz-izq__entrar .jz-btn--orquidea:hover { background: #000; }
.jz-btn--chico { background: var(--plomo); color: var(--tinta); }
.jz-btn--chico[aria-pressed="true"], [aria-pressed="true"].jz-btn--orquidea { background: var(--suave); color: var(--gris) !important; }
.jz-chip[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); }
/* Menú de abajo en el celular: blanco y la Z en negro. */
.jz-menu { background: #fff; box-shadow: 0 6px 24px rgb(0 0 0 / 12%); }
.jz-menu a { color: #8a8a8e; }
.jz-menu a[aria-current="page"] { color: var(--tinta); }
.jz-menu a[aria-current="page"] svg path[d^="M10.5"] { fill: #fff; }
.jz-menu__crear span { background: var(--tinta); box-shadow: 0 6px 16px rgb(0 0 0 / 25%); }
/* Detalles que quedaban en rosado. */
.jz-lado section.jz-lado__unete { background: #fff; }
.jz-lado__z, .jz-vacio__z { background: var(--suave); }
.jz-vacio__z svg, .jz-lado__z svg { stroke: var(--tinta); }
.jz-np__caja header button, .jz-np__tabs button[aria-selected="true"] { color: var(--tinta); }
.jz-np__caja header button:hover { background: var(--suave); }
.jz-np__tabs button[aria-selected="true"]::after { background: var(--tinta); }
.jz-perfil__solicitudes h2 span { background: var(--plomo); color: var(--tinta); }
.jz-globo { background: #e0245e; }
.jz-amigos-menu > div button { color: #c0392b; }
.jz-perfil__portada { background: linear-gradient(135deg, #3a3a3c, #1d1d1f); }
.jz-np__portada:not(.con-foto) { background: linear-gradient(135deg, #3a3a3c, #1d1d1f); }
.jz-dir-cab:not(.jz-dir-cab--fotos) { background: #1d1d1f; }
.jz-dir-cab__texto small { color: rgb(255 255 255 / 80%) !important; }
.jz-estado { color: #1d7a4c; }
.jz .jz-btn--chico { border-color: transparent; background: var(--plomo); color: var(--tinta) !important; }
.jz .jz-btn--chico:hover { background: var(--plomo-2); }
.jz .jz-btn--chico[aria-pressed="true"] { background: var(--suave); color: var(--gris) !important; }
.jz-premium { background: var(--plomo); color: var(--tinta); }
.jz .jz-card__pie .jz-pedir.jz-btn--orquidea { background: var(--plomo); color: var(--tinta) !important; }
.jz-lado__grilla span, .jz-video-listo span { background: rgb(0 0 0 / 72%); }
/* ── Perfil de persona como red social, menú de tu cuenta y chat (19/10/2026) ── */
/* Botones redondos de la barra, como en las redes. */
.jz-barra__icono, .jz-yo { border-radius: 50%; }
.jz-yo.jz-yo--entrar { border-radius: 999px; }
.jz-barra__icono--chat svg { width: 22px; height: 22px; fill: currentColor !important; stroke: none !important; }
.jz-barra__icono--chat .jz-chat-punto { fill: var(--suave); }
.jz-barra__icono--chat:hover .jz-chat-punto { fill: var(--plomo); }
.jz-barra__icono--chat[aria-expanded="true"] .jz-chat-punto { fill: var(--tinta); }
.jz-yo[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }
.jz-yo .jz-globo { top: -3px; right: -3px; }
.jz-cuenta { position: fixed; z-index: 46; top: 66px; right: 12px; display: grid; gap: 6px; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 84px); overflow-y: auto; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgb(0 0 0 / 18%), 0 0 0 1px rgb(0 0 0 / 4%); animation: jz-entra .16s ease-out; }
.jz-cuenta__yo { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; color: var(--tinta); text-decoration: none; box-shadow: 0 1px 6px rgb(0 0 0 / 10%); }
.jz-cuenta__yo:hover { background: var(--suave); }
.jz-cuenta__yo .jz-av { width: 44px; height: 44px; border-radius: 50%; }
.jz-cuenta__yo span, .jz-cuenta__fila > span:not(.jz-cuenta__ic) { display: grid; min-width: 0; }
.jz-cuenta__yo b { font-size: 16px; }
.jz-cuenta__yo small, .jz-cuenta__fila small { color: var(--gris); font-size: 12.5px; }
.jz-cuenta__grupo { display: grid; margin: 0; padding-top: 4px; }
.jz-cuenta__sub { margin: 6px 10px 2px; color: var(--gris); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.jz-cuenta__fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--tinta); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.jz-cuenta__fila:hover { background: var(--suave); }
.jz-cuenta__fila b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.jz-cuenta__fila .jz-av { width: 36px; height: 36px; border-radius: 50%; }
.jz-cuenta__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--plomo); }
.jz-cuenta__ic svg { width: 19px; height: 19px; fill: none; stroke: var(--tinta); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-cuenta__num { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #e0245e; color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.jz-cuenta__pie { margin: 4px 10px 2px; color: #9a9a9e; font-size: 11.5px; }
@media (max-width: 1023px) { .jz-cuenta { top: 58px; } }
/* Perfil de persona sobre la estructura del negocio. */
.jz-np--persona .jz-av.jz-np__logo { color: var(--tinta); background: var(--plomo); }
.jz-np--persona .jz-av.jz-np__logo img { object-fit: cover; }
.jz-np__cifra { padding: 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: 14.5px; cursor: pointer; }
.jz-np__cifra:hover { text-decoration: underline; }
.jz-np__cifra b { color: var(--tinta); }
.jz-np__caras { display: flex; margin-top: 8px; padding-left: 4px; }
.jz-np__caras:empty { display: none; }
.jz-np__caras a { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.jz-np__caras .jz-av { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; }
.jz-np__botones .jz-btn { font: inherit; font-size: 15px; font-weight: 700; min-height: 42px; border-radius: 12px; }
.jz-np__botones .jz-amistad .jz-btn, .jz-np__botones .jz-amigos-menu summary { border-color: transparent; background: var(--tinta); color: #fff !important; }
.jz-np__botones .jz-amistad [data-jz-amistad="cancelar"], .jz-np__botones .jz-amistad [data-jz-amistad="rechazar"], .jz-np__botones .jz-amigos-menu summary { background: var(--plomo); color: var(--tinta) !important; }
.jz-np__oscuro { border-color: transparent; background: var(--tinta); color: #fff !important; }
.jz-np__oscuro:hover { background: #000; }
.jz-np__oscuro svg { stroke: #fff !important; stroke-width: 6; }
.jz-np__solo-icono { width: 46px; padding: 0 !important; flex: none !important; }
.jz-np__presentacion { margin: 0 0 12px; text-align: center; font-size: 15px; line-height: 1.45; }
.jz-np__ancho { width: 100%; margin-top: 14px; border-radius: 12px; }
.jz-np__caja header small { display: block; color: var(--gris); font-size: 13px; }
.jz-np__nada { margin: 0; color: var(--gris); font-size: 14px; }
.jz-amigos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.jz-amigos--todos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.jz-amigo { display: grid; gap: 6px; min-width: 0; color: var(--tinta); text-decoration: none; }
.jz-amigo__foto { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--plomo); font-family: var(--marca); font-size: 26px; font-weight: 700; }
.jz-amigo__foto img { width: 100%; height: 100%; object-fit: cover; }
.jz-amigo b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jz-amigo:hover b { text-decoration: underline; }
.jz-np__negocios { display: grid; gap: 4px; }
.jz-np__negocios a { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: var(--tinta); text-decoration: none; }
.jz-np__negocios a:hover { background: var(--suave); }
.jz-np__negocios .jz-av { width: 40px; height: 40px; border-radius: 50%; }
.jz-np__negocios span { display: grid; min-width: 0; }
.jz-np__negocios small { color: var(--gris); font-size: 12.5px; }
.jz-np__caja--ancha { margin: 0 12px; }
.jz-np--persona + .jz-perfil__solicitudes { margin-top: 0; }
@media (min-width: 1024px) {
.jz-np__caja--ancha { margin: 0; }
.jz-en-negocio .jz-perfil__solicitudes { margin: 0 0 16px; }
}
/* Negocios: mientras buscas, sin carrusel. */
.jz-dir-cab.es-buscando { min-height: 0 !important; padding: 6px 2px 4px !important; background: none !important; color: var(--tinta); box-shadow: none; }
.jz-dir-cab.es-buscando .jz-dir-cab__fotos, .jz-dir-cab.es-buscando .jz-dir-provs, .jz-dir-cab.es-buscando .jz-dir-cab__lema, .jz-dir-cab.es-buscando .jz-dir-cab__texto p { display: none; }
.jz-dir-cab.es-buscando h1 { font-size: 24px !important; }
.jz-dir-cab.es-buscando .jz-dir-cab__texto small { color: var(--gris) !important; font-size: 14px; }
/* La portada llena siempre el ancho (con aspect-ratio + max-height se angostaba). */
.jz-np__portada { aspect-ratio: auto; height: clamp(170px, 38vw, 400px); max-height: none; }
.jz-np__caras a { text-decoration: none; }
/* Negocios sin portada: plomo, no un degradé de color. */
.jz-dir-card__portada:not(:has(img)) { background: linear-gradient(135deg, #e8e8ed, #d6d6dc) !important; }
/* Check de verificado junto al nombre en «Negocios cerca para seguir». */
.jz-sugerido b { display: flex; align-items: center; gap: 4px; min-width: 0; }
.jz-sugerido b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-sugerido b .jz-sello { flex: none; width: 15px; height: 15px; }
/* Pie de la publicación de un negocio: «Chatear» y «WhatsApp» juntos a la derecha. */
.jz-card__pie .jz-pedir--chat + .jz-pedir--wa { margin-left: 6px; }
.jz .jz-card__pie .jz-pedir { border-color: transparent; background: var(--plomo); color: var(--tinta) !important; }
.jz .jz-card__pie .jz-pedir:hover { background: var(--plomo-2); }
.jz .jz-card__pie .jz-pedir--wa { background: #1fa855; color: #fff !important; }
.jz .jz-card__pie .jz-pedir--wa:hover { background: #178a45; }
.jz-card__pie .jz-pedir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
.jz-card__pie { flex-wrap: wrap; row-gap: 6px; }
.jz-card__pie .jz-pedir { flex: 1 1 40%; margin-left: 0 !important; }
.jz-card__pie .jz-pedir--chat + .jz-pedir--wa { margin-left: 6px !important; }
}
/* Mensajes a pantalla completa, como las apps de chat (19/10/2026). */
.jz-en-chat .jz-chat__cajas { flex-wrap: wrap; overflow: visible; }
.jz-en-chat .jz-chat__caja { max-width: 100%; }
.jz-en-chat .jz-chat__caja > :not(img):not(i) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-en-chat .jz-chat__conv { background: #fff; }
@media (min-width: 1024px) {
.jz-en-chat .jz-marco { grid-template-columns: minmax(0, 1400px); padding: 16px 20px; }
.jz-en-chat .jz-marco > :not(.jz-main) { display: none !important; }
.jz-en-chat .jz-chatpag { height: calc(100vh - 92px); min-height: 520px; border-radius: 22px; }
.jz-en-chat .jz-chat--pagina .jz-chat__lista { flex-basis: 380px; border-right-color: var(--suave); }
}
.jz-chat__av .jz-av, .jz-chat__quien .jz-av { border-radius: 50% !important; }
/* Preguntas con letra normal (el usuario: «mucha negrita»), sin el rojo. */
.jz-pregunta__texto { font-family: var(--texto); font-weight: 500; font-size: 17px; line-height: 1.45; letter-spacing: 0; }
.jz-pregunta__signo { background: var(--plomo); color: var(--tinta); font-family: var(--texto); font-weight: 700; }
.jz-pregunta__cab b { color: var(--gris); font-weight: 700; }
.jz-lado__pregunta b { font-weight: 500; }
/* Logo real de WhatsApp, video de las agrupaciones y menos negrita (19/10/2026). */
.jz .jz-wa-logo { width: 18px; height: 18px; fill: currentColor !important; stroke: none !important; }
.jz-np__datos .jz-wa-logo { width: 22px; height: 22px; fill: #1fa855 !important; }
.jz .jz-btn { font-weight: 600; }
.jz .jz-btn--chico { font-weight: 600 !important; }
.jz-np__botones .jz-btn { font-weight: 600 !important; }
.jz-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #000; cursor: pointer; }
.jz-yt img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.jz-yt:hover img { opacity: .88; }
.jz-yt__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgb(0 0 0 / 62%); transform: translate(-50%, -50%); }
.jz-yt__play svg { width: 28px; height: 28px; margin-left: 4px; fill: #fff; stroke: none; }
.jz-yt--marco { cursor: auto; }
.jz-np__video h2 { margin-bottom: 12px; }
.jz-np__video-titulo { margin: 10px 2px 0; color: var(--gris); font-size: 14px; }
.jz-np__trayectoria { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; }
.jz-card__prod { color: inherit; text-decoration: none; } .jz-card__prod:hover { text-decoration: underline; } .jz-foto--primero .jz-fotos a { cursor: pointer; }
/* Producto vendido y opciones del dueño (087, 19/10/2026). */
.jz-precio.es-vendido { background: var(--tinta); color: #fff; letter-spacing: .02em; }
.jz-pp__meta .es-vendido { color: var(--tinta); font-weight: 700; }
.jz-pp__dueno { display: grid; gap: 10px; margin: 14px 0; padding: 16px; border-radius: 18px; background: var(--suave); }
.jz-pp__dueno h2 { margin: 0; font-family: var(--marca); font-weight: 600; font-size: 16px; }
.jz-pp__dueno-estado { margin: 0; color: var(--gris); font-size: 14.5px; }
.jz-pp__dueno-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.jz-pp__dueno-botones .jz-btn { min-height: 42px; border-color: transparent; border-radius: 12px; background: var(--plomo); }
.jz-pp__dueno-botones .jz-btn--oscuro { background: var(--tinta); color: #fff !important; }
.jz-pp__dueno-botones svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jz-pp__borrar { justify-self: start; padding: 4px 0; border: 0; background: none; color: #c0392b; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.jz-pp__borrar:hover { text-decoration: underline; }
.jz-vendido { display: grid; gap: 10px; }
.jz-vendido__op { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: var(--suave); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.jz-vendido__op:hover { background: var(--plomo); }
.jz-vendido__op > svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-vendido__op > svg[viewBox="0 0 48 48"] { stroke-width: 6; }
.jz-vendido__op span { display: grid; gap: 2px; }
.jz-vendido__op b { font-size: 15.5px; }
.jz-vendido__op small { color: var(--gris); font-size: 13px; }
.jz-menu-card__caja a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tinta); font-size: 14.5px; font-weight: 600; text-decoration: none; } .jz-menu-card__caja a:hover { background: var(--suave); }
.jz .jz-pp__borrar { color: #c0392b !important; } .jz-vendido { padding-bottom: 6px; }
/* Atajos y secciones con la identidad de PLAZUNI: línea negra en círculo plomo (19/10/2026). */
.jz-izq__icono, .jz-apps__icono { border-radius: 50% !important; background: var(--plomo) !important; }
.jz-ic-app, .jz-izq__icono > svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: var(--tinta) !important; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.jz-apps__icono .jz-ic-app { width: 26px !important; height: 26px !important; }
.jz-izq__icono--gris svg { fill: var(--tinta) !important; stroke: none !important; width: 16px !important; height: 16px !important; }
/* Chat: tus negocios como logos y la fila «En línea» (19/10/2026). */
.jz-chat__caja--logo { position: relative; justify-content: center; width: 34px; min-width: 34px; height: 32px; padding: 0 !important; border-radius: 50% !important; background: transparent !important; }
.jz-chat__caja--logo .jz-av { width: 30px; height: 30px; border-radius: 50%; font-size: 10px; box-shadow: 0 0 0 1px var(--linea); }
.jz-chat__caja--logo[aria-pressed="true"] .jz-av { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }
.jz-chat__caja--logo i { position: absolute; top: -3px; right: -4px; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border: 2px solid #fff; border-radius: 8px !important; font-size: 9.5px !important; line-height: 12px !important; }
.jz-chat__activos { padding: 0 14px 8px; }
.jz-chat__activos p { margin: 2px 0 6px; color: var(--gris); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.jz-chat__activos > div { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.jz-chat__activos > div::-webkit-scrollbar { display: none; }
.jz-chat__activos button { display: grid; justify-items: center; gap: 4px; flex: none; width: 56px; padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; cursor: pointer; }
.jz-chat__activos .jz-av { width: 46px; height: 46px; border-radius: 50% !important; }
.jz-chat__activos .jz-chat__linea { right: 0; bottom: 0; }
.jz-chat__activos small { overflow: hidden; max-width: 100%; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.jz-chat__activos button:hover small { text-decoration: underline; }
/* Celular: la zona completa («San Martín») y un buscador que se note (19/10/2026). */
.jz-zona__corto { display: none; }
@media (max-width: 520px) {
.jz .jz-zona { max-width: 140px; padding: 0 10px; }
.jz-zona__largo { display: none; }
.jz-zona__corto { display: inline; }
.jz-barra .jz-logo { font-size: 19px; }
.jz-barra { gap: 6px; }
}
@media (max-width: 370px) { .jz .jz-zona { max-width: 112px; } }
.jz-bus-cab { gap: 12px; }
.jz-bus-cab .jz-dir-buscar { height: 54px; padding: 0 6px 0 16px; border: 1.5px solid var(--linea); border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 5%); }
.jz-bus-cab .jz-dir-buscar:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 3px rgb(0 0 0 / 8%); }
.jz-bus-cab .jz-dir-buscar svg { width: 22px; height: 22px; color: var(--tinta); }
.jz-bus-cab .jz-dir-buscar input { font-size: 16px; }
.jz-bus-cab .jz-dir-buscar input::placeholder { color: #8e8e93; }
.jz .jz-bus-cab .jz-dir-buscar .jz-btn { min-height: 42px; padding: 0 18px; border-radius: 13px; background: var(--tinta); color: #fff !important; font-size: 15px; }
.jz-bus-tipos { background: var(--suave); }
.jz-bus-tipos button[aria-selected="true"] { background: var(--tinta); }
@media (max-width: 520px) {
.jz-bus-cab { margin: 10px; padding: 14px; border-radius: 22px; }
.jz-bus-cab .jz-dir-buscar { height: 52px; }
.jz .jz-bus-cab .jz-dir-buscar .jz-btn { padding: 0 14px; }
.jz-bus-tipos button { padding: 0 12px; font-size: 13.5px; }
}
/* «Escribir» y «Pedir» de los videos: negro con letra blanca (19/10/2026). */
.jz .jz-clip__bandeja .jz-btn--selva, .jz .jz-clip__bandeja .jz-btn { border-color: transparent; background: var(--tinta); color: #fff !important; font-weight: 600; }
.jz .jz-clip__bandeja .jz-btn:hover { background: #000; }
/* Celular: el logo es la Z de PLAZUNI (su ícono: verde selva, Z blanca y punto orquídea, para que llame la atención) y la zona se lee
entera en la barra (19/10/2026). Solo en pantallas muy angostas, «San Martín». */
@media (max-width: 520px) {
.jz-barra .jz-logo { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 11px; font-size: 0 !important; color: transparent !important;
background: url("/static/cliente/img/jagzon.svg") center / cover no-repeat; }
.jz-barra .jz-logo span { display: none; }
.jz .jz-zona { max-width: 180px; }
.jz-zona__largo { display: inline; }
.jz-zona__corto { display: none; }
}
@media (max-width: 380px) {
.jz .jz-zona { max-width: 140px; }
.jz-zona__largo { display: none; }
.jz-zona__corto { display: inline; }
}
.jz-barra__lupa.es-abierta { background: var(--tinta) !important; color: #fff !important; }
/* ---------- Visor de videos como TikTok, con identidad PLAZUNI (19/10/2026) ----------
El video en su marco; a la derecha el autor y las acciones con sus
números; abajo el nombre, seguidores, texto y Escribir. En computadora,
flechas para pasar y el nivel del volumen. */
.jz .jz-clip { overflow: visible; border-radius: 0; background: none; margin: 0 0 12px; }
.jz .jz-clip::after { content: none; }
.jz .jz-clip__marco { position: relative; height: 100%; overflow: hidden; border-radius: 18px; background: #000; }
.jz .jz-clip__marco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 28%) 0%, transparent 18%, transparent 55%, rgb(0 0 0 / 70%) 100%); }
.jz .jz-clip__marco > *:not(video) { z-index: 2; }
.jz .jz-clip__barra { top: auto; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0; background: rgb(255 255 255 / 22%); }
.jz .jz-clip__barra i { border-radius: 0; }
.jz .jz-clip__sonido { top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; }
.jz .jz-clip__sonido .jz-icono { width: 38px; height: 38px; background: rgb(0 0 0 / 38%); }
.jz .jz-clip__sonido input { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: #fff; height: 4px; cursor: pointer; }
.jz .jz-clip__sonido:hover input, .jz .jz-clip__sonido:focus-within input { width: 84px; opacity: 1; }
.jz .jz-clip__info { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 6px; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 45%); }
.jz .jz-clip__quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jz .jz-clip__quien a { min-width: 0; color: #fff !important; text-decoration: none; }
.jz .jz-clip__quien b { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; font-size: 15.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.jz .jz-clip__quien b svg { flex: none; width: 15px; height: 15px; }
.jz .jz-clip__seguir { position: static; flex: none; min-height: 28px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 8px; background: none; color: #fff; font-weight: 500; font-size: 12.5px; text-shadow: none; }
.jz .jz-clip__seguir[aria-pressed="true"] { border-color: transparent; background: rgb(255 255 255 / 18%); }
.jz .jz-clip__info > small { color: rgb(255 255 255 / 82%); font-size: 12.5px; }
.jz .jz-clip__info > small .es-cerrado { color: #f3d1c9; }
.jz .jz-clip__info > p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.4; white-space: pre-line; }
.jz .jz-clip__bandeja { position: static; margin-top: 4px; padding: 8px; gap: 8px; border-radius: 14px; background: rgb(255 255 255 / 94%); text-shadow: none; }
.jz .jz-clip__bandeja .jz-btn { min-height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 500; }
.jz .jz-clip__bandeja .jz-clip__wa { flex: none; width: 36px; padding: 0; justify-content: center; background: #25d366 !important; }
.jz .jz-clip__bandeja .jz-clip__wa svg { width: 20px; height: 20px; fill: #fff; }
.jz .jz-clip__acciones { position: absolute; left: auto; right: 6px; bottom: 150px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jz .jz-clip__autor { display: block; margin-bottom: 4px; }
.jz .jz-clip__autor .jz-av { width: 48px; height: 48px; border: 2px solid #fff; }
.jz .jz-clip__acciones .jz-btn svg, .jz .jz-clip__acciones .jz-reac__e { width: 46px; height: 46px; background: rgb(255 255 255 / 16%); }
.jz .jz-clip__acciones .jz-btn { font-weight: 500; }
.jz .jz-ver__flechas { display: none; }
@media (min-width: 1024px) {
.jz .jz-ver__rollo { max-width: none; padding-bottom: 0; }
.jz .jz-clip { display: flex; justify-content: center; align-items: flex-end; gap: 18px; height: calc(100dvh - 76px); padding-bottom: 14px; scroll-snap-align: start; }
.jz .jz-clip__marco { height: 100%; aspect-ratio: 9 / 16; max-width: calc(100vw - 260px); }
.jz .jz-clip__acciones { position: static; width: 58px; padding-bottom: 6px; }
.jz .jz-clip__acciones .jz-btn svg, .jz .jz-clip__acciones .jz-reac__e { background: rgb(255 255 255 / 12%); }
.jz .jz-ver__flechas { position: fixed; right: 28px; top: 50%; z-index: 31; display: grid; gap: 14px; transform: translateY(-50%); }
.jz .jz-ver__flechas .jz-icono { width: 48px; height: 48px; background: rgb(255 255 255 / 12%); color: #fff; }
.jz .jz-ver__flechas .jz-icono:hover { background: rgb(255 255 255 / 22%); }
.jz .jz-ver__flechas svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
/* Videos de la columna: la miniatura con el nombre encima, sin caja negra. */
.jz .jz-lado section.jz-lado__videos { background: var(--blanco, #fff); color: var(--tinta); }
.jz .jz-lado__videos h2 { color: var(--tinta); }
.jz .jz-lado__grilla a { background: #1d1d1f; border-radius: 14px; }
.jz .jz-lado__grilla a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 60%)); }
.jz .jz-lado__grilla a video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.jz .jz-lado__grilla span { z-index: 1; left: 8px; right: 8px; bottom: 8px; padding: 0; border-radius: 0; background: none !important; font-weight: 500; text-shadow: 0 1px 2px rgb(0 0 0 / 50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jz .jz-lado__grilla .jz-lado__play { position: absolute; top: 8px; left: 8px; z-index: 1; width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 50%)); }
/* Crear: la opción elegida en plomo claro, como papel; nada de negro. */
.jz .jz-tipos--grande button { border: 1px solid #e3e3e8; background: #fff; color: var(--tinta); }
.jz .jz-tipos--grande button b { font-weight: 600; }
.jz .jz-tipos--grande button svg { stroke: #6e6e73; }
.jz .jz-tipos--grande button[aria-selected="true"] { border-color: #c7c7cc; background: #f2f2f4; color: var(--tinta); box-shadow: none; }
.jz .jz-tipos--grande button[aria-selected="true"] svg { stroke: #1d1d1f; }
.jz .jz-tipos--grande button[aria-selected="true"] small { color: #6e6e73; }
.jz .jz-clip__escribir { display: flex; margin-top: 2px; }
.jz .jz-clip__escribir .jz-btn { gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: rgb(255 255 255 / 92%); color: #1d1d1f !important; font-weight: 500; text-shadow: none; }
.jz .jz-clip__escribir .jz-btn:hover { background: #fff; }
.jz .jz-clip__escribir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Explora: Match primero, en rojo. */
.jz .jz-apps__match { display: flex; align-items: center; gap: 12px; margin: 4px 2px 6px; padding: 12px 14px; border-radius: 16px; background: #e5262f; color: #fff !important; text-decoration: none; box-shadow: 0 6px 18px rgb(229 38 47 / 28%); transition: transform .12s, background .15s; }
.jz .jz-apps__match:hover { background: #d11f28; }
.jz .jz-apps__match:active { transform: scale(.98); }
.jz .jz-apps__match > span:nth-child(2) { flex: 1; display: grid; line-height: 1.25; }
.jz .jz-apps__match b { font-family: var(--marca); font-size: 16px; font-weight: 700; }
.jz .jz-apps__match small { color: rgb(255 255 255 / 88%); font-size: 12.5px; }
.jz .jz-apps__match-icono { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; }
.jz .jz-apps__match-icono svg { width: 24px; height: 24px; fill: #e5262f; }
.jz .jz-apps__match-ir { flex: none; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Plaza sin publicaciones: los negocios de la zona. */
.jz .jz-plaza-negocios { margin: 16px 0 0; border-radius: 18px; box-shadow: none; }
.jz .jz-plaza-negocios h2 { margin-bottom: 8px; }
.jz .jz-plaza-negocios__todos { display: flex; justify-content: center; width: 100%; margin-top: 12px; min-height: 40px; border: 0; border-radius: 12px; background: #f2f2f4; color: #1d1d1f !important; font-weight: 500; }
.jz .jz-plaza-negocios__todos:hover { background: #e8e8ed; }
/* «Todo el Perú» antes de la lista de departamentos. */
.jz .jz-zona-peru { margin: 0 0 8px; }
/* Directorio: mosaico o lista. */
.jz .jz-dir-barra { display: flex; align-items: flex-start; gap: 10px; }
.jz .jz-dir-barra .jz-dir-rubros { flex: 1; min-width: 0; }
.jz .jz-dir-modo { flex: none; display: flex; gap: 2px; margin-right: 12px; padding: 3px; border-radius: 12px; background: #e8e8ed; }
.jz .jz-dir-modo button { display: grid; place-items: center; width: 36px; height: 32px; border: 0; border-radius: 9px; background: none; color: #6e6e73; cursor: pointer; }
.jz .jz-dir-modo button[aria-pressed="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.jz .jz-dir-modo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jz .jz-dir-modo circle { fill: currentColor; stroke: none; }
@media (min-width: 1024px) { .jz .jz-dir-modo { margin-right: 0; } }
.jz .jz-dir-grilla.es-lista { display: flex; flex-direction: column; gap: 0; overflow: hidden; border-radius: 18px; background: #fff; }
.jz .jz-dir-grilla.es-lista .jz-dir-card { flex-direction: row; border-radius: 0; box-shadow: none; transform: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card + .jz-dir-card { box-shadow: 0 -1px 0 #f0f0f3; }
.jz .jz-dir-grilla.es-lista .jz-dir-card:hover { background: #f7f7f9; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__portada { display: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: center; width: 100%; padding: 10px 14px; }
.jz .jz-dir-grilla.es-lista .jz-av.jz-dir-card__logo { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; border: 0; border-radius: 12px; font-size: 15px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__nombre { grid-column: 2; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__nombre b { -webkit-line-clamp: 1; font-size: 14.5px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small { grid-column: 2; margin: 0 !important; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-estado, .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-dir-card__sin { display: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo .jz-btn--chico { grid-column: 3; grid-row: 1 / 3; width: auto; min-width: 104px; margin: 0; }
@media (min-width: 1024px) {
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-columns: 48px minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-estado, .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-dir-card__sin { display: block; grid-column: 3; grid-row: 1 / 3; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo .jz-btn--chico { grid-column: 4; }
}
@media (max-width: 600px) { .jz .jz-dir-grilla.es-lista { margin: 0 12px; padding: 0; } .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 10px 12px; } .jz .jz-dir-grilla.es-lista .jz-av.jz-dir-card__logo { width: 44px; height: 44px; } .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo .jz-btn--chico { min-width: 0; padding: 0 14px; } }
/* Lista del directorio con chat, WhatsApp, horario y ubicación (en mosaico no se muestran). */
.jz .jz-dir-card__donde, .jz .jz-dir-card__acc { display: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-rows: none;
grid-template-areas: "logo nombre nombre nombre" "logo meta meta meta" "logo donde donde donde" "logo horario acc seguir"; row-gap: 2px; align-items: center; }
.jz .jz-dir-grilla.es-lista .jz-av.jz-dir-card__logo { grid-area: logo; align-self: start; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__nombre { grid-area: nombre; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small:first-of-type { grid-area: meta; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-estado, .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo > small.jz-dir-card__sin { display: block !important; grid-area: horario; font-size: 12.5px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__donde { grid-area: donde; display: flex; align-items: center; gap: 5px; min-width: 0; color: #6e6e73; font-size: 12.5px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__donde svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__donde span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc { grid-area: acc; display: flex; gap: 6px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc .jz-icono { width: 36px; height: 36px; background: #f2f2f4; color: #1d1d1f; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc .jz-icono:hover { background: #e8e8ed; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc svg { width: 18px; height: 18px; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__wa { background: #25d366 !important; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__wa svg { fill: #fff; stroke: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo .jz-btn--chico { grid-area: seguir; min-height: 36px; }
@media (min-width: 1024px) {
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) auto auto; column-gap: 16px;
grid-template-areas: "logo nombre donde horario acc seguir" "logo meta donde horario acc seguir"; }
.jz .jz-dir-grilla.es-lista .jz-av.jz-dir-card__logo { align-self: center; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__donde { align-items: flex-start; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__donde span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
}
/* Íconos de la lista del directorio: más finos (chat con puntos y ubicación). */
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc .jz-icono svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc .jz-pts { stroke-width: 2.6; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__acc a.jz-icono { display: grid; place-items: center; text-decoration: none; }
/* Ficha completa en la página del negocio (20/10/2026). */
.jz .jz-np__desc { margin: 0 0 10px; color: #3a3a3c; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.jz .jz-np__razon { display: block; color: #8e8e93; font-size: 12px; }
.jz .jz-np__redes { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 0 !important; }
.jz .jz-np__redes a { padding: 5px 12px; border-radius: 999px; background: #f2f2f4; color: #1d1d1f !important; font-size: 13px; text-decoration: none; }
.jz .jz-np__redes a:hover { background: #e8e8ed; }
.jz .jz-np__horario { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jz .jz-np__horario li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; color: #3a3a3c; }
.jz .jz-np__horario li b { font-weight: 500; color: #1d1d1f; }
.jz .jz-np__horario li b.es-cerrado { color: #8e8e93; }
.jz .jz-np__horario li.es-hoy { background: #f2f2f4; }
.jz .jz-np__horario li.es-hoy span { font-weight: 600; color: #1d1d1f; }
.jz .jz-np__mapa { height: 260px; margin: 0 0 10px; overflow: hidden; border-radius: 14px; background: #e8e8ed; }
.jz .jz-np__locales { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.jz .jz-np__locales li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 2px; }
.jz .jz-np__locales li + li { box-shadow: 0 -1px 0 #f0f0f3; }
.jz .jz-np__local-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f2f2f4; }
.jz .jz-np__local-ic svg { width: 16px; height: 16px; fill: none; stroke: #1d1d1f; stroke-width: 1.8; }
.jz .jz-np__local-txt { display: grid; min-width: 0; line-height: 1.35; }
.jz .jz-np__local-txt b { font-size: 13.5px; font-weight: 600; }
.jz .jz-np__local-txt span { font-size: 13.5px; color: #3a3a3c; }
.jz .jz-np__local-txt small { font-size: 12px; color: #8e8e93; }
.jz .jz-np__llegar { gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #1d1d1f; color: #fff !important; font-size: 13px; font-weight: 500; white-space: nowrap; }
.jz .jz-np__llegar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.jz .jz-np__llegar:hover { background: #000; }
.jz .jz-np__mas-locales { margin: 6px 0 0; color: #8e8e93; font-size: 12.5px; }
@media (max-width: 600px) {
.jz .jz-np__mapa { height: 200px; }
.jz .jz-np__locales li { grid-template-columns: 28px minmax(0, 1fr); }
.jz .jz-np__llegar { grid-column: 2; justify-self: start; }
}
/* Lista: el RUC junto al rubro; el distrito ya va en la ubicación. En mosaico, al revés. */
.jz .jz-dir-card__ruc { display: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__ruc { display: inline; color: #8e8e93; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__dist { display: none; }
@media (min-width: 1024px) { .jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr) auto auto; } }
/* Razón social: su propia línea en la lista (en mosaico no). */
.jz .jz-dir-card__razon { display: none; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__razon { grid-area: razon; display: block; overflow: hidden; color: #8e8e93; font-size: 11.5px; letter-spacing: .01em; white-space: nowrap; text-overflow: ellipsis; }
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-areas: "logo nombre nombre nombre" "logo meta meta meta" "logo razon razon razon" "logo donde donde donde" "logo horario acc seguir"; }
@media (min-width: 1024px) {
.jz .jz-dir-grilla.es-lista .jz-dir-card__cuerpo { grid-template-areas: "logo nombre donde horario acc seguir" "logo meta donde horario acc seguir" "logo razon donde horario acc seguir"; }
}
/* Directorio buscando: más arriba y compacto (título y total en una línea). */
.jz .jz-dir-cab.es-buscando { display: flex; margin-top: 0 !important; margin-bottom: 6px !important; padding: 0 2px !important; }
.jz .jz-dir-cab.es-buscando .jz-dir-cab__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.jz .jz-dir-cab.es-buscando h1 { margin: 0; font-size: 21px !important; }
.jz .jz-dir-cab.es-buscando .jz-dir-cab__texto small { margin: 0; font-size: 13px; font-weight: 500; }
@media (min-width: 1024px) { .jz-en-directorio .jz-dir-cab.es-buscando { padding-top: 0 !important; } }
/* Bandera del Perú junto al nombre. */
.jz .jz-bandera { display: inline-block; width: .9em; height: .6em; margin-left: .32em; vertical-align: .08em; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%); }
/* El logo sin el punto (pedido del usuario): «jagzon». */
.jz-logo span, .jz-wordmark i { display: none !important; }
/* Descripción y trayectoria justificadas, con guiones en español (sin huecos grandes). */
.jz .jz-np__desc, .jz .jz-np__trayectoria { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; overflow-wrap: break-word; }
/* Acomodar portada o foto antes de subirla. */
.jz-ajuste { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 55%); }
.jz-ajuste__caja { display: grid; gap: 14px; width: min(640px, 100%); padding: 16px 18px 18px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); }
.jz-ajuste__cab { display: flex; align-items: center; justify-content: space-between; }
.jz-ajuste__cab b { font-family: var(--marca); font-size: 17px; font-weight: 600; }
.jz-ajuste__marco { position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #1d1d1f; cursor: grab; touch-action: none; user-select: none; outline: none; }
.jz-ajuste__marco:focus-visible { box-shadow: 0 0 0 3px rgb(0 0 0 / 25%); }
.jz-ajuste__marco.es-moviendo { cursor: grabbing; }
.jz-ajuste__marco canvas { display: block; }
.jz-ajuste__marco.es-redondo { width: min(360px, 100%); justify-self: center; border-radius: 16px; }
.jz-ajuste__marco.es-redondo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / 55%); pointer-events: none; }
.jz-ajuste__guia { position: absolute; left: 50%; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font-size: 12.5px; transform: translateX(-50%); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.jz-ajuste__guia svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.jz-ajuste__marco.es-moviendo .jz-ajuste__guia { opacity: 0; }
.jz-ajuste__zoom { display: flex; align-items: center; gap: 10px; color: #6e6e73; }
.jz-ajuste__zoom input { flex: 1; accent-color: #1d1d1f; }
.jz-ajuste__zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.jz-ajuste__pie { display: flex; justify-content: flex-end; gap: 8px; }
.jz-ajuste__marco.es-redondo::after { box-shadow: 0 0 0 999px rgb(0 0 0 / 62%); }
.jz-editar__campo input { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; font: inherit; font-size: 15px; }
.jz-editar__campo input:focus { border-color: #1d1d1f; outline: none; }
.jz-editar__campo small { color: #8e8e93; font-size: 12px; line-height: 1.4; }
/* Chat como el de Messenger (20/10/2026): bajo su ícono, arriba a la derecha,
a toda la altura de la pantalla; fotos redondas. */
@media (min-width: 521px) {
.jz-cajon[data-cual="chat"] .jz-cajon__caja { top: 64px; bottom: 12px; left: auto; right: 16px; width: 380px; height: auto; border-radius: 16px; box-shadow: 0 12px 40px rgb(0 0 0 / 18%), 0 0 0 1px rgb(0 0 0 / 6%); transform: translateY(-8px); opacity: 0; transform-origin: top right; transition: transform .18s ease, opacity .18s ease; }
.jz-cajon--abierto[data-cual="chat"] .jz-cajon__caja { transform: none; opacity: 1; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab { padding: 14px 12px 4px 18px; }
.jz-cajon[data-cual="chat"] .jz-cajon__cab h2 { font-size: 22px; font-weight: 700; color: #1d1d1f; }
.jz-chat--cajon .jz-chat__cab { top: 12px; right: 52px; }
.jz-chat--cajon .jz-chat__buscar { height: 38px; margin: 6px 14px 8px; border-radius: 999px; }
.jz-chat--cajon .jz-chat__av .jz-av { width: 52px; height: 52px; border-radius: 50%; }
.jz-chat--cajon .jz-chat__fila { padding: 8px 10px; border-radius: 10px; }
.jz-chat--cajon .jz-chat__fila-txt b { font-size: 15px; font-weight: 600; }
.jz-chat--cajon .jz-chat__fila-txt small { font-size: 13px; }
}
@media (min-width: 1280px) { .jz-cajon[data-cual="chat"] .jz-cajon__caja { left: auto; right: 24px; } }
/* Editar perfil, más profesional (20/10/2026). */
.jz .jz-editar { gap: 18px; }
.jz .jz-editar__portada { height: auto; aspect-ratio: 16 / 7; border-radius: 14px; background: linear-gradient(135deg, #3a3a3c, #1d1d1f); }
.jz .jz-editar__acciones { right: 12px; bottom: 12px; }
.jz .jz-editar__acciones .jz-btn { min-height: 34px; padding: 0 12px; border-radius: 10px; background: rgb(255 255 255 / 94%); font-weight: 500; box-shadow: 0 1px 4px rgb(0 0 0 / 15%); }
.jz .jz-editar__foto { align-items: flex-end; gap: 16px; margin-top: -58px; padding-left: 18px; }
.jz .jz-editar__foto .jz-av--perfil { width: 112px !important; height: 112px !important; border-radius: 50% !important; box-shadow: 0 0 0 4px #fff, 0 4px 14px rgb(0 0 0 / 14%); }
.jz .jz-editar__foto > div { padding: 0 0 4px; }
.jz .jz-editar__foto b { margin-bottom: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.jz .jz-editar__botones .jz-btn { min-height: 34px; border-radius: 10px; background: #f2f2f4; font-weight: 500; }
.jz .jz-editar__botones .jz-btn:hover, .jz .jz-editar__acciones .jz-btn:hover { background: #e8e8ed; }
.jz .jz-editar__campo { gap: 6px; }
.jz .jz-editar__campo > span { font-size: 13.5px; font-weight: 600; color: #1d1d1f; }
.jz .jz-editar__campo textarea, .jz .jz-editar__campo input { width: 100%; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; color: #1d1d1f; font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.jz .jz-editar__campo textarea { min-height: 88px; padding: 12px 14px; }
.jz .jz-editar__campo input { min-height: 44px; padding: 0 14px; }
.jz .jz-editar__campo textarea:focus, .jz .jz-editar__campo input:focus { border-color: #1d1d1f; box-shadow: 0 0 0 3px rgb(0 0 0 / 8%); outline: none; }
.jz .jz-editar__campo textarea::placeholder, .jz .jz-editar__campo input::placeholder { color: #a1a1a6; }
.jz .jz-editar__campo small { justify-self: start; color: #8e8e93; font-size: 12px; line-height: 1.45; }
.jz .jz-editar__campo small[data-jz-ed-cuenta] { justify-self: end; margin-top: -2px; }
.jz .jz-editar__nota { font-size: 13px; }
.jz .jz-editar__nota a { color: #1d1d1f; font-weight: 500; }
.jz .jz-editar__pie { position: sticky; bottom: -1px; margin: 0 -2px -2px; padding: 12px 2px 2px; background: #fff; }
.jz .jz-editar__pie .jz-btn { min-height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 500; }
.jz .jz-editar__pie .jz-btn[type="submit"] { border-color: #1d1d1f; background: #1d1d1f; color: #fff !important; }
.jz .jz-editar__pie .jz-btn[type="submit"]:hover { background: #000; }
@media (max-width: 520px) {
.jz .jz-editar__foto { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: -48px; padding-left: 12px; }
.jz .jz-editar__foto .jz-av--perfil { width: 92px !important; height: 92px !important; }
}
/* Zona elegida bien marcada; arriba, la que estás viendo. */
.jz .jz-zona-chip[aria-pressed="true"], .jz .jz-zona-chip--todo[aria-pressed="true"] { border-color: #1d1d1f; background: #1d1d1f; color: #fff; }
.jz .jz-zona-chip--todo { background: #f2f2f4; font-weight: 600; }
.jz .jz-zona-fila[aria-pressed="true"] { background: #f2f2f4; }
.jz .jz-zona-actual { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f2f2f4; color: #3a3a3c; font-size: 13.5px; }
.jz .jz-zona-actual svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jz .jz-zona-actual b { color: #1d1d1f; font-weight: 600; }
/* Descripción: dos párrafos y «Ver más». */
.jz .jz-np__desc-caja { margin: 0 0 10px; }
.jz .jz-np__desc-caja .jz-np__desc { margin: 0; }
.jz .jz-np__desc-caja .jz-np__desc + .jz-np__desc { margin-top: 12px; }
.jz .jz-np__vermas { margin-top: 6px; padding: 0; border: 0; background: none; color: #1d1d1f; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.jz .jz-np__vermas:hover { text-decoration: underline; }
/* Video en la tarjeta: su cuadro y, a la vista, se reproduce solo. */
.jz .jz-video-mini video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.jz .jz-video-mini span { transition: opacity .25s, transform .15s; }
.jz .jz-video-mini.es-sonando span { opacity: 0; }
.jz .jz-video-mini.es-sonando:hover span { opacity: 1; }
/* Mientras PLAZUNI arma el encabezado y la columna izquierda, no se ve la
versión básica de la plantilla (en computadora). */
@media (min-width: 1024px) {
body.jz:not(.jz-armado) .jz-menu, body.jz:not(.jz-armado) .jz-ciudad, body.jz:not(.jz-armado) .jz-barra__acciones { visibility: hidden; }
}
body.jz.jz-armado .jz-menu { animation: jz-aparece .18s ease-out; }
@keyframes jz-aparece { from { opacity: 0; } to { opacity: 1; } }
/* Estado del horario, más fino (20/10/2026). */
.jz .jz-estado { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: #1a7f37; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jz .jz-estado.es-cerrado { color: #c0392b; }
.jz .jz-estado b { font-weight: 600; }
.jz .jz-estado span { overflow: hidden; color: #6e6e73; font-weight: 400; text-overflow: ellipsis; }
.jz .jz-punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
/* ---------- Jerarquía de color (20/10/2026): un solo botón negro por pantalla ----------
Principal (negro): la acción que más importa. Sin sesión «Entrar»; con
sesión «Crear». Secundario (plomo): el resto. Pestañas: texto, la elegida
con fondo suave. WhatsApp sigue verde (su marca). */
/* Pestañas («Para ti», «Preguntas»…, rubros, filtros): no son botones. */
.jz .jz-chip { min-height: 34px; padding: 0 14px; border: 0; background: transparent; color: #6e6e73; font-weight: 500; }
.jz .jz-chip:hover { background: #ececf0; color: #1d1d1f; }
.jz .jz-chip[aria-pressed="true"] { background: #e3e3e8; color: #1d1d1f; font-weight: 600; }
/* Sin sesión: «Entrar» de la barra es el principal; «Crear» y el «Entrar» de
la columna izquierda, secundarios. */
.jz .jz-barra:has(.jz-yo--entrar) .jz-btn--orquidea[data-jz-crear] { background: #ececf0; color: #1d1d1f !important; }
.jz .jz-barra:has(.jz-yo--entrar) .jz-btn--orquidea[data-jz-crear]:hover { background: #e3e3e8; }
.jz .jz-yo.jz-yo--entrar { background: #1d1d1f; color: #fff !important; font-weight: 600; }
.jz .jz-yo.jz-yo--entrar:hover { background: #000; }
.jz .jz-izq__entrar .jz-btn--orquidea { background: #fff; border: 1px solid #d2d2d7; color: #1d1d1f !important; font-weight: 600; }
.jz .jz-izq__entrar .jz-btn--orquidea:hover { background: #f5f5f7; }
.jz .jz-izq__entrar b { color: #1d1d1f; }
/* Secundarios en tarjetas y fichas: plomo claro, nunca negro. */
.jz .jz-card__pie .jz-btn:not(.jz-wa-btn):not([href*="wa.me"]) { background: #f2f2f4; color: #1d1d1f !important; }
/* Chat como Messenger (20/10/2026): la lista a toda la altura; al abrir una
conversación, ventanita abajo a la derecha. */
@media (min-width: 521px) {
.jz-cajon[data-cual="chat"]:has([data-jz-chat-conv]:not([hidden])) .jz-cajon__caja { top: auto; bottom: 0; width: 360px; height: min(560px, calc(100vh - 72px)); border-radius: 16px 16px 0 0; }
.jz-cajon[data-cual="chat"]:has([data-jz-chat-conv]:not([hidden])) .jz-cajon__cab { padding: 6px 8px 0 14px; }
.jz-cajon[data-cual="chat"]:has([data-jz-chat-conv]:not([hidden])) .jz-cajon__cab h2 { font-size: 15px; }
}
/* Enviar: siempre visible. Negro con la flecha blanca; apagado sin texto. */
.jz .jz-chat__enviar { background: #1d1d1f; color: #fff !important; }
.jz .jz-chat__enviar:hover { background: #000; }
.jz .jz-chat__enviar svg { width: 18px; height: 18px; fill: none; stroke: #fff !important; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin: 0 0 0 -1px; }
.jz form:has(textarea:placeholder-shown) .jz-chat__enviar { background: #e8e8ed; }
.jz form:has(textarea:placeholder-shown) .jz-chat__enviar svg { stroke: #8e8e93 !important; }
/* Globos más limpios: los tuyos oscuros suaves, los del otro plomo claro. */
.jz .jz-chat__b.es-mia .jz-chat__globo { background: #2c2c2e; color: #fff; }
.jz .jz-chat__b.es-mia .jz-chat__globo a { color: #fff; text-decoration-color: rgb(255 255 255 / 50%); }
.jz .jz-chat__b:not(.es-mia) .jz-chat__globo { background: #f0f0f3; box-shadow: none; }
.jz .jz-chat__globo { font-size: 14.5px; line-height: 1.4; }
/* Íconos del centro de la barra: más grandes y finos; el activo relleno
suave con su barra; al pasar, una píldora (20/10/2026). */
@media (min-width: 1024px) {
.jz .jz-atajos { gap: 6px; }
.jz .jz-atajos a { width: 82px; color: #86868b; }
.jz .jz-atajos a::before { inset: 7px 6px; border-radius: 14px; }
.jz .jz-atajos a:hover { color: #1d1d1f; }
.jz .jz-atajos a:hover::before { background: #f2f2f4; }
.jz .jz-atajos svg { width: 29px; height: 29px; stroke-width: 1.7; transition: transform .15s ease; }
.jz .jz-atajos a:hover svg { transform: translateY(-1px); }
.jz .jz-atajos a[aria-current="page"] { color: #1d1d1f; }
.jz .jz-atajos a[aria-current="page"] svg { stroke-width: 2; fill: color-mix(in srgb, currentColor 12%, transparent); }
.jz .jz-atajos a[aria-current="page"]::after { left: 14px; right: 14px; height: 3px; border-radius: 3px; background: #1d1d1f; }
}
@media (min-width: 1024px) and (max-width: 1240px) { .jz .jz-atajos a { width: 64px; } }
/* ---------- Color de marca: Verde Amazonía (20/10/2026) ----------
Solo en lo principal: Crear (o Entrar sin sesión), el Z del celular, la
barrita del ícono activo y enviar en el chat. Lo demás, blanco y plomo. */
:root { --jz-marca: #0B6B4E; --jz-marca-hondo: #08573F; --jz-marca-suave: #E6F2EE; }
.jz .jz-barra .jz-btn--orquidea[data-jz-crear] { background: var(--jz-marca); color: #fff !important; }
.jz .jz-barra .jz-btn--orquidea[data-jz-crear]:hover { background: var(--jz-marca-hondo); }
.jz .jz-barra .jz-btn--orquidea[data-jz-crear] svg { stroke: #fff; }
.jz .jz-barra:has(.jz-yo--entrar) .jz-btn--orquidea[data-jz-crear] { background: #ececf0; color: #1d1d1f !important; }
.jz .jz-barra:has(.jz-yo--entrar) .jz-btn--orquidea[data-jz-crear] svg { stroke: #1d1d1f; }
.jz .jz-yo.jz-yo--entrar { background: var(--jz-marca); }
.jz .jz-yo.jz-yo--entrar:hover { background: var(--jz-marca-hondo); }
.jz .jz-menu__crear span { background: var(--jz-marca) !important; }
@media (min-width: 1024px) { .jz .jz-atajos a[aria-current="page"]::after { background: var(--jz-marca); } }
.jz form:not(:has(textarea:placeholder-shown)) .jz-chat__enviar { background: var(--jz-marca); }
.jz form:not(:has(textarea:placeholder-shown)) .jz-chat__enviar:hover { background: var(--jz-marca-hondo); }
/* Ícono del chat abierto y su pestaña elegida: verde suave y plomo, no negro. */
.jz .jz-barra__icono[aria-expanded="true"] { background: var(--jz-marca-suave) !important; color: var(--jz-marca) !important; }
.jz .jz-barra__icono--chat[aria-expanded="true"] .jz-chat-punto { fill: var(--jz-marca-suave); }
.jz .jz-chat__caja[aria-pressed="true"] { background: #e3e3e8 !important; color: #1d1d1f !important; font-weight: 600; }
/* Mover la portada (097) y botones del perfil más suaves (20/10/2026). */
.jz .jz-editar__portada.es-moviendo { cursor: grab; touch-action: none; }
.jz .jz-editar__portada.es-moviendo:active { cursor: grabbing; }
.jz .jz-editar__portada.es-moviendo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 70%); border-radius: inherit; pointer-events: none; }
.jz .jz-editar__guia { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 34px; border-radius: 10px; background: rgb(0 0 0 / 55%); color: #fff; font-size: 13px; }
.jz .jz-editar__guia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.jz .jz-editar__listo { font-weight: 600 !important; }
.jz .jz-editar__portada img { transition: object-position .05s linear; }
/* «Crear publicación»: negro suave; «Editar perfil»: plomo un tono más oscuro. */
.jz .jz-np__oscuro { background: #3a3a3c !important; border-color: #3a3a3c !important; color: #fff !important; }
.jz .jz-np__oscuro:hover { background: #2c2c2e !important; }
.jz .jz-np__oscuro svg { stroke: #fff; }
.jz [data-jz-editar-perfil].jz-np__gris { background: #dedee3 !important; color: #1d1d1f !important; }
.jz [data-jz-editar-perfil].jz-np__gris:hover { background: #d2d2d7 !important; }
/* Los botones de la portada, arriba a la derecha: abajo los tapa la foto. */
.jz .jz-editar__acciones { top: 12px; bottom: auto; right: 12px; z-index: 2; flex-wrap: wrap; justify-content: flex-end; }
.jz .jz-editar__foto { pointer-events: none; }
.jz .jz-editar__foto > * { pointer-events: auto; }
.jz .jz-editar__pie .jz-btn[type="submit"] { border-color: var(--jz-marca); background: var(--jz-marca); }
.jz .jz-editar__pie .jz-btn[type="submit"]:hover { background: var(--jz-marca-hondo); }
/* Verificado: escudo verde con check, como en el panel (20/10/2026). */
.jz .jz-sello { flex: none; width: 16px; height: 16px; }
.jz .jz-sello circle { display: none; }
.jz .jz-sello .jz-sello__escudo { fill: var(--jz-marca-suave); stroke: var(--jz-marca); stroke-width: 1.9; stroke-linejoin: round; }
.jz .jz-sello .jz-sello__check { fill: none; stroke: var(--jz-marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Producto: dónde está (distrito), bajo el nombre. */
.jz .jz-art__lugar { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #8e8e93; font-size: 12.5px; }
.jz .jz-art__lugar svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; }
/* Producto: «Mensaje» (principal, verde de marca) y WhatsApp con su ícono sin
fondo; si no caben en una fila, van en dos (20/10/2026). */
.jz .jz-pp__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.jz .jz-pp__acciones .jz-btn { flex: 1 1 140px; gap: 7px; font-weight: 600; text-overflow: clip; }
.jz .jz-pp__acciones .jz-btn--icono { flex: 0 0 44px; }
.jz .jz-pp__acciones .jz-btn--orquidea { background: var(--jz-marca) !important; }
.jz .jz-pp__acciones .jz-btn--orquidea:hover { background: var(--jz-marca-hondo) !important; }
.jz .jz-pp__acciones a[href*="wa.me"] { border: 1px solid #cfe8d6 !important; background: transparent !important; color: #128c4b !important; }
.jz .jz-pp__acciones a[href*="wa.me"]:hover { background: #f1f8f3 !important; }
.jz .jz-pp__acciones a[href*="wa.me"] svg { width: 19px; height: 19px; fill: #25d366; }
/* Lo buscado no está en tu zona: aviso de que se muestra todo el Perú. */
.jz-dir-aviso { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--jz-marca-suave, #E6F2EE); color: #1d1d1f; font-size: 14px; line-height: 1.4; }
.jz-dir-aviso .jz-bandera { flex: none; width: 24px; height: 16px; }
.jz-dir-aviso b { color: var(--jz-marca, #0B6B4E); }
/* Personas que quizás conozcas (20/10/2026): tarjetas en fila deslizable,
foto grande, «Agregar» en el verde de la marca y una ✕ para quitar. */
.jz-sugeridos { margin: 12px 0; padding: 14px 0 16px; border-radius: 16px; background: #fff; }
.jz-sugeridos__cab { padding: 0 16px 10px; }
.jz-sugeridos__cab h2 { margin: 0; color: #1d1d1f; font-size: 17px; font-weight: 700; }
.jz-sugeridos__cab p { margin: 3px 0 0; color: #6e6e73; font-size: 14px; }
.jz-sugeridos__fila { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jz-sugeridos__fila::-webkit-scrollbar { display: none; }
.jz-sugeridos .jz-sug { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; width: 150px; padding: 16px 10px 12px; border-radius: 14px; background: #f5f5f7; text-align: center; scroll-snap-align: start; }
.jz-sug__foto { text-decoration: none; }
.jz-sug__foto .jz-av { width: 84px; height: 84px; border-radius: 50%; font-size: 28px; }
.jz-sug__nombre { display: -webkit-box; margin-top: 10px; overflow: hidden; color: #1d1d1f; font-size: 14.5px; font-weight: 600; line-height: 1.25; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.jz-sugeridos .jz-sug small { display: block; min-height: 17px; margin: 2px 0 10px; overflow: hidden; color: #6e6e73; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.jz .jz-sug__agregar { width: 100%; margin-top: auto; border: 0; background: var(--jz-marca, #0B6B4E); color: #fff; font-weight: 600; }
.jz .jz-sug__agregar:hover { background: var(--jz-marca-hondo, #08573F); }
.jz .jz-sug__agregar.es-enviada, .jz .jz-sug__agregar.es-enviada:disabled { background: var(--jz-marca-suave, #E6F2EE); color: var(--jz-marca, #0B6B4E); opacity: 1; cursor: default; }
.jz-sug__quitar { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #6e6e73; cursor: pointer; }
.jz-sug__quitar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.jz-sug__quitar:hover { color: #1d1d1f; }
@media (max-width: 600px) { .jz-sugeridos { margin: 8px 0; border-radius: 0; } .jz-sugeridos .jz-sug { width: 140px; } }
/* El globito de solicitudes sobre tu foto: la foto recortaba el número
(overflow del círculo). Ahora la foto se recorta sola y el globito queda
encima, entero y legible (20/10/2026). */
.jz .jz-yo { position: relative; overflow: visible; }
.jz .jz-yo img { border-radius: inherit; }
.jz .jz-yo .jz-globo { top: -5px; right: -7px; z-index: 1; min-width: 19px; height: 19px; padding: 0 5px; font-size: 11px; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
.jz-chat__b:not(.es-mia) .jz-chat__autor { display: block; margin-bottom: 2px; color: var(--jz-marca, #0B6B4E); font-weight: 600; }
/* «¡Ahora son amigos!» (20/10/2026): ventana al confirmar una amistad. */
.jz-felicita { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 45%); animation: jzFelFondo .2s ease-out; }
.jz-felicita.es-saliendo { opacity: 0; transition: opacity .18s; }
.jz-felicita__caja { position: relative; width: min(400px, 100%); padding: 32px 24px 22px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgb(0 0 0 / 25%); animation: jzFelCaja .32s cubic-bezier(.2, .9, .3, 1.2); }
.jz-felicita__cerrar { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f2f2f4; color: #3a3a3c; cursor: pointer; }
.jz-felicita__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.jz-felicita__caras { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.jz-felicita__caras .jz-av { width: 84px; height: 84px; border-radius: 50%; font-size: 28px; box-shadow: 0 0 0 4px #fff; }
.jz-felicita__caras .jz-av:last-child { margin-left: -14px; }
.jz-felicita__sello { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -14px 0 -14px; align-self: flex-end; border-radius: 50%; background: var(--jz-marca, #0B6B4E); box-shadow: 0 0 0 4px #fff; animation: jzFelSello .45s .15s both cubic-bezier(.2, .9, .3, 1.4); }
.jz-felicita__sello svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.jz-felicita h2 { margin: 0 0 8px; color: #1d1d1f; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.jz-felicita p { margin: 0 0 22px; color: #48484a; font-size: 15px; line-height: 1.5; }
.jz-felicita p b { color: #1d1d1f; }
.jz-felicita__botones { display: grid; gap: 8px; }
.jz .jz-felicita__si, .jz-felicita__si { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: var(--jz-marca, #0B6B4E); color: #fff; font-size: 15px; font-weight: 600; }
.jz .jz-felicita__si:hover, .jz-felicita__si:hover { background: var(--jz-marca-hondo, #08573F); }
.jz .jz-felicita__no, .jz-felicita__no { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: #f2f2f4; color: #1d1d1f; font-size: 15px; font-weight: 600; }
@media (max-width: 600px) {
.jz-felicita { place-items: end center; padding: 0; }
.jz-felicita__caja { width: 100%; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; animation-name: jzFelSube; }
}
@keyframes jzFelFondo { from { opacity: 0; } }
@keyframes jzFelCaja { from { opacity: 0; transform: scale(.92); } }
@keyframes jzFelSube { from { transform: translateY(40px); opacity: 0; } }
@keyframes jzFelSello { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .jz-felicita, .jz-felicita__caja, .jz-felicita__sello { animation: none; } }
/* El amigo recién confirmado se ilumina un momento en tu lista. */
.jz-amigo.es-nuevo { animation: jzAmigoNuevo 1.6s ease-out; border-radius: 12px; }
@keyframes jzAmigoNuevo { 0%, 30% { background: var(--jz-marca-suave, #E6F2EE); } }
/* Pantallas grandes (2K/4K): las tres columnas juntas y centradas, como Facebook. */
@media (min-width: 1600px) {
.jz-marco { max-width: 1480px; margin: 0 auto; }
.jz-barra { padding-left: max(20px, calc((100vw - 1480px) / 2)); padding-right: max(20px, calc((100vw - 1480px) / 2)); }
}
/* PLAZUNI va sin punto (26/10/2026). */
.jz-logo span { display: none; }
/* MENÚ DE ABAJO PEGADO AL BORDE, COMO FACEBOOK (pedido del usuario,
27/10/2026). En el celular era una píldora flotante a 12 px de los bordes,
con esquinas y el botón Crear saliendo por arriba. Ahora va de lado a lado
y apoyado en el borde de abajo, con una línea fina encima; en el iPhone el
espacio de la barra de inicio queda dentro (safe-area). Crear queda dentro
de la barra, del mismo alto que los demás. En la PC no cambia. */
@media (max-width: 1023px) {
.jz-menu {
left: 0; right: 0; bottom: 0;
height: calc(56px + env(safe-area-inset-bottom));
padding: 0 0 env(safe-area-inset-bottom);
border-radius: 0;
border-top: 1px solid rgb(0 0 0 / 8%);
box-shadow: 0 -2px 12px rgb(0 0 0 / 5%);
align-items: stretch;
}
.jz-menu a { min-height: 56px; gap: 3px; font-size: 10.5px; -webkit-tap-highlight-color: transparent; }
.jz-menu a svg { width: 24px; height: 24px; }
.jz-menu__crear span { width: 40px; height: 34px; margin-top: 0; border-radius: 12px; transform: none; box-shadow: none; }
.jz-menu__crear svg { width: 22px !important; height: 22px !important; }
.jz-marco { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.jz-franja-app { bottom: calc(66px + env(safe-area-inset-bottom)); }
.jz-aviso { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* «Crear» lleva la P de PLAZUNI aunque la plantilla en memoria aún tenga la L (02/11/2026). */
[data-jz-crear] svg path { d: path("M16 38V11h12a8 8 0 0 1 8 8c0 6-8 13-8 13s-3.4-3-5.6-6H16"); }
/* Sin cuenta: ventana al centro para entrar (02/11/2026). */
.jz-entrar-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 45%); animation: jz-entrar-fondo .15s ease-out; }
.jz-entrar-modal__caja { position: relative; display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 380px; padding: 32px 26px 24px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgb(0 0 0 / 25%); animation: jz-entrar-caja .18s ease-out; }
.jz-entrar-modal__x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f2f0; color: var(--tinta); font-size: 22px; line-height: 1; cursor: pointer; }
.jz-entrar-modal__x:hover { background: #e5e5ea; }
.jz-entrar-modal__p { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--selva); }
.jz-entrar-modal__p svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.jz-entrar-modal h2 { margin: 6px 0 0; font-family: var(--marca); font-weight: 700; font-size: 20px; }
.jz-entrar-modal p { margin: 0 0 8px; color: var(--gris); font-size: 15px; line-height: 1.45; }
.jz-entrar-modal .jz-btn { justify-content: center; width: 100%; min-height: 46px; font-size: 16px; text-decoration: none; }
.jz-entrar-modal__crear { padding: 8px; color: var(--tinta); font-weight: 700; font-size: 15px; }
@keyframes jz-entrar-fondo { from { opacity: 0; } }
@keyframes jz-entrar-caja { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.jz .jz-entrar-modal .jz-btn { background: var(--jz-marca); color: #fff !important; }
.jz .jz-entrar-modal .jz-btn:hover { background: var(--jz-marca-hondo); }
/* Ventanas de PLAZUNI: fondo bien oscuro y borroso para que la ventana resalte (02/11/2026). */
.jz-entrar-modal { background: rgb(0 0 0 / 72%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.jz-hoja__fondo, .jz-cajon__fondo { background: rgb(0 0 0 / 72%) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.jz-ajuste { background: rgb(0 0 0 / 72%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* Buscador: más ancho en computadora y con «Lugares del Perú» (02/11/2026). */
@media (min-width: 1024px) {
.jz-buscar .jz-sugerencias { right: auto; width: min(560px, calc(100vw - 32px)); }
}
.jz-sug--lugar { align-items: flex-start; }
.jz-sug--lugar > span:last-child { gap: 1px; }
.jz-sug__pin { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: #eef4f1; color: var(--jz-marca, #0B6B4E); }
.jz-sug__pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jz-sug__pin .jz-bandera { width: 24px; height: 16px; stroke: none; }
.jz-sug--lugar small { white-space: normal; }
.jz-sug--lugar em { display: -webkit-box; margin-top: 3px; overflow: hidden; color: #3a3a3c; font-size: 13px; font-style: normal; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.jz-sug__fuente { margin: 2px 10px 6px 56px; color: #9a9a96; font-size: 11px; }
/* Logo PLAZUNI con el pin en la i (02/11/2026). En celular sigue el ícono. */
@media (min-width: 521px) {
.jz-barra .jz-logo { display: inline-block; flex: none; width: 112px; height: 32px; overflow: hidden; color: transparent !important; font-size: 0 !important; background: url("/static/img/logo-jagzon.svg") left center / contain no-repeat; }
}
.jz .jz-entrar-modal__p { background: var(--jz-marca, #0b6b4e); }
/* La P de PLAZUNI rellena, con el pin hueco (02/11/2026): se nota más que la de trazo. */
.jz-pz { fill: currentColor !important; stroke: none !important; }
[data-jz-crear] svg path { d: path("M14.8 10.4H26.4a9.6 9.6 0 0 1 9.6 9.6c0 6.4-9.6 15.9-9.6 15.9s-4.3-4.5-7-8.6v8.5a3.3 3.3 0 0 1-6.6 0V13.7a3.3 3.3 0 0 1 2-3.3zM22.7 20a3.7 3.7 0 1 0 7.4 0a3.7 3.7 0 1 0-7.4 0z"); fill: currentColor; stroke: none !important; fill-rule: evenodd; transform: translate(24px, 24px) scale(1.25) translate(-24.4px, -24.75px); }
.jz-entrar-modal__p svg, .jz-menu__crear svg { color: #fff; }
.jz-lado__z svg, .jz-vacio__z svg { color: var(--tinta); }