/* Página pública de cada negocio. Usa los colores del negocio (variables --bz-*), no los de NODU. */
.bz { --bz-bg: #0B2B26; --bz-btn: #00D6C6; --bz-edge: #009E92; --bz-txt: #0B2B26; --bz-fg: #fff; --bz-logo-bg: #fff; --bz-logo-tx: #0B2B26;
  min-height: 100dvh; background: var(--bz-bg); color: var(--bz-fg); position: relative; isolation: isolate; }
.bz a { text-decoration: none; }
.bz-wrap { max-width: 480px; margin: 0 auto; padding: 0 18px 28px; position: relative; z-index: 1; }

/* Estilo Clásico: foto de fondo */
.bz.clasico::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--bz-bg) var(--cover) center/cover no-repeat; }
.bz.clasico::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.78) 100%); }
.bz.clasico .bz-head { padding-top: calc(54px + env(safe-area-inset-top)); }
/* Estilo Vitrina: foto arriba y destacados */
.bz.vitrina { background: var(--bz-bg); }
.bz.vitrina .bz-cover { height: 210px; background: var(--bz-bg) var(--cover) center/cover no-repeat; position: relative; }
.bz.vitrina .bz-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); }
.bz.vitrina .bz-head { margin-top: -46px; }
/* Estilo Marca: color sólido */
.bz.marca .bz-head { padding-top: calc(48px + env(safe-area-inset-top)); }
.bz.marca::before { content: ''; position: absolute; right: -30vmin; top: -30vmin; width: 80vmin; height: 80vmin; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 70%); z-index: -1; }

.bz-head { text-align: center; padding-bottom: 20px; }
.bz-logo { width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--bz-logo-bg); color: var(--bz-logo-tx); font-weight: 800; font-size: 30px; letter-spacing: -.02em; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.bz-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.bz-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.bz-tag { font-size: 14px; opacity: .85; margin-top: 4px; }
.bz-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.16); padding: 5px 12px; border-radius: 99px; backdrop-filter: blur(6px); }
.bz-open i { width: 7px; height: 7px; border-radius: 50%; background: #5BE3A0; }

.bz-notice { background: rgba(255,255,255,.95); color: #0B2B26; border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.bz-notice.warn { background: #FBEFD0; color: #7A5410; }
.bz-btns { display: flex; flex-direction: column; gap: 11px; }
.bz-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--bz-btn); color: var(--bz-txt); box-shadow: 0 3px 0 var(--bz-edge), 0 8px 18px rgba(0,0,0,.18); transition: transform .08s; min-height: 62px; }
.bz-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bz-edge); }
.bz-btn .ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(0,0,0,.1); display: grid; place-items: center; flex: none; }
.bz-btn .tx { flex: 1; min-width: 0; text-align: left; }
.bz-btn .l { font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.bz-btn .s { font-size: 12.5px; opacity: .78; margin-top: 2px; }
.bz-btn > svg:last-child { opacity: .55; flex: none; }
.bz-mini { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.bz-mini a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgba(255,255,255,.16); color: var(--bz-fg); font-weight: 600; font-size: 13.5px; backdrop-filter: blur(6px); }
.bz-feat { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 16px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
.bz-feat a { flex: none; width: 138px; background: #fff; color: #0B2B26; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.bz-feat img { width: 100%; height: 92px; object-fit: cover; } .bz-feat div { padding: 8px 10px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .bz-feat b { display: block; font-size: 12px; color: var(--bz-edge); margin-top: 2px; }
.bz-sechead { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin: 4px 0 10px; text-align: left; }
.bz-foot { text-align: center; padding: 26px 0 8px; font-size: 12px; opacity: .75; }
.bz-foot a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.bz-foot img { height: 16px; width: auto; opacity: .95; }
.bz-foot.big { opacity: .95; font-size: 13px; } .bz-foot.big img { height: 22px; }
.bz-foot.small { opacity: .5; font-size: 11px; } .bz-foot.small img { height: 12px; }

/* Subpáginas (menú, sellos, WiFi...) */
.bzs { --bz-bg: #0B2B26; --bz-btn: #00D6C6; --bz-edge: #009E92; --bz-txt: #0B2B26; background: #F5F3EC; color: #0B2B26; min-height: 100dvh; }
.bzs-top { background: var(--bz-bg); color: var(--bz-fg, #fff); padding: calc(12px + env(safe-area-inset-top)) 16px 14px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; }
.bzs-top a { color: inherit; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); }
.bzs-top h1 { font-size: 17px; font-weight: 700; flex: 1; }
.bzs-body { max-width: 560px; margin: 0 auto; padding: 18px 16px 30px; display: flex; flex-direction: column; gap: 16px; }
.bzs .card { box-shadow: 0 1px 2px rgba(11,43,38,.06), 0 6px 20px rgba(11,43,38,.06); }
.bzs .btn { background: var(--bz-btn); color: var(--bz-txt); }
.bzs .btn.dark { background: var(--bz-bg); color: #fff; }
.bzs .link { color: var(--bz-edge); }
.catnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 64px; z-index: 9; background: #F5F3EC; padding: 10px 16px; margin: -18px -16px 0; }
.catnav a { flex: none; padding: 8px 16px; border-radius: 99px; background: #fff; font-weight: 600; font-size: 13px; text-decoration: none; color: #0B2B26; box-shadow: inset 0 0 0 1.5px #E3E0D5; }
.catnav a.on { background: var(--bz-bg); color: #fff; box-shadow: none; }
.prod { display: flex; gap: 12px; background: #fff; border-radius: 16px; padding: 10px; box-shadow: 0 1px 2px rgba(11,43,38,.06), 0 4px 14px rgba(11,43,38,.05); }
.prod img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; flex: none; background: #EBE8DD; }
.prod .n { font-weight: 700; font-size: 15px; line-height: 1.25; } .prod .d { font-size: 12.5px; color: #5A6E69; margin-top: 3px; line-height: 1.4; } .prod .p { font-weight: 800; margin-top: 6px; }
.prod.out img, .prod.out .n { opacity: .55; }
.prod .star { color: #B7791F; font-size: 11px; font-weight: 700; }
.stampgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stampgrid .s { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px dashed #CFC9B8; color: #CFC9B8; font-weight: 700; font-size: 14px; }
.stampgrid .s.on { border: 0; background: var(--sc, #0B2B26); color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.2); animation: pop .35s both; }
.stampgrid .s.gift { border: 2px solid var(--sc, #0B2B26); color: var(--sc, #0B2B26); background: #fff; }
@keyframes pop { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.stars { display: flex; gap: 8px; justify-content: center; }
.stars button { background: none; border: 0; font-size: 38px; line-height: 1; cursor: pointer; color: #D9D4C4; padding: 4px; transition: transform .1s; } .stars button.on { color: #F2B01E; } .stars button:active { transform: scale(1.2); }
.bigok { width: 76px; height: 76px; border-radius: 50%; background: var(--bz-btn); color: var(--bz-txt); display: grid; place-items: center; margin: 0 auto 8px; animation: pop .4s both; }
.consent { font-size: 12px; color: #5A6E69; display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; } .consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--bz-edge); }
.consent details { margin-top: 4px; } .consent summary { cursor: pointer; color: var(--bz-edge); font-weight: 600; }

/* Invitación suave a registrarse (una vez al día, se puede cerrar) */
.bz-invite { background: rgba(255,255,255,.96); color: #0B2B26; border-radius: 14px; padding: 10px 12px 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.bz-invite span { flex: 1; line-height: 1.3; }
.bz-invite a { background: var(--bz-btn); color: var(--bz-txt); padding: 7px 12px; border-radius: 999px; text-decoration: none; font-weight: 800; white-space: nowrap; }
.bz-invite button { border: 0; background: transparent; font-size: 20px; line-height: 1; color: #5A6E69; cursor: pointer; padding: 2px 4px; }

/* ===== NODU como cliente: manual de marca (Verde Profundo #0B2B26, Turquesa #00D6C6, Arena #F5F3EC, Montserrat) ===== */
.bz.nodu { background: #0B2B26; }
.bz.nodu::before { display: none; }
.bz.nodu .bz-wrap { padding-bottom: 20px; }
.nd-head { position: relative; padding: calc(40px + env(safe-area-inset-top)) 8px 26px !important; overflow: visible; }
.nd-waves { position: absolute; left: -18px; right: -18px; top: 0; width: calc(100% + 36px); height: 100%; pointer-events: none; z-index: 0; border-radius: 0 0 40px 40px; }
.nd-head > *:not(.nd-waves) { position: relative; z-index: 1; }
.nd-logo { width: 178px; max-width: 70%; height: auto; display: block; margin: 0 auto; }
.nd-lema { margin: 12px 0 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; color: #00D6C6; }
.nd-saludo { margin: 20px auto 0; max-width: 30ch; font-size: 15px; line-height: 1.5; color: #F5F3EC; text-wrap: balance; }
.nd-saludo strong { color: #00D6C6; font-weight: 700; }
.nd-pre { background: rgba(0,214,198,.14); border: 1px solid rgba(0,214,198,.5); color: #F5F3EC; border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; line-height: 1.35; }
.nd-pre svg { color: #00D6C6; flex: none; }
.bz.nodu .bz-btn { background: #F5F3EC; color: #0B2B26; box-shadow: none; border-radius: 16px; }
.bz.nodu .bz-btn.pri { background: #00D6C6; color: #0B2B26; }
.bz.nodu .bz-btn .ic { background: #0B2B26; color: #00D6C6; }
.bz.nodu .bz-btn:active { transform: scale(.98); box-shadow: none; }
.bz.nodu .bz-btn:focus-visible, .nd-pair a:focus-visible { outline: 3px solid #00D6C6; outline-offset: 2px; }
.nd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.nd-pair a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid rgba(245,243,236,.18); color: #F5F3EC; font-weight: 600; font-size: 14px; min-height: 56px; }
.nd-pair a svg { color: #00D6C6; flex: none; }
.nd-como { border-top: 1px solid rgba(245,243,236,.14); margin-top: 24px; padding-top: 20px; }
.nd-como h2 { margin: 0 0 14px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #00D6C6; font-weight: 700; }
.nd-como ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nd-como li { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.35; color: rgba(245,243,236,.72); }
.nd-como li span { font-weight: 800; font-size: 20px; color: #F5F3EC; } .nd-como li strong { color: #F5F3EC; font-size: 13px; font-weight: 700; }
.nd-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0 6px; font-size: 11.5px; color: rgba(245,243,236,.7); }
.nd-foot img { height: 22px; width: auto; }
/* Subpáginas de NODU: encabezado verde y botones turquesa con texto verde oscuro */
.bzs.nodu .bzs-top { background: #0B2B26; border-bottom: 3px solid #00D6C6; }
.bzs.nodu .btn { background: #00D6C6; color: #0B2B26; }
.bzs.nodu .btn.ghost { background: transparent; color: #0B2B26; box-shadow: inset 0 0 0 1.5px #0B2B26; }
.bzs.nodu .link { color: #00695F; }
@media (prefers-reduced-motion: reduce) { .bz.nodu .bz-btn { transition: none; } }
.bzs .nd-pre { background: #0B2B26; color: #F5F3EC; border-color: #00D6C6; }