/* Muestra en miniatura de la página de un negocio (barra, portada con arcos o adorno, botón y días de la agenda).
   La usan "Mi página" del panel (vista en vivo de la marca) y la demo (estilos para elegir). Los colores los pone
   aplicarPaleta() sobre el elemento .vista-marca. */
.vista-marca { border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); position: relative; color: var(--negro); background: var(--crema); min-height: 220px; }
.vista-marca .vm-barra { background: var(--negro); color: var(--marfil); display: flex; align-items: center; gap: 8px; padding: 9px 12px; font: 600 13px/1 var(--display); }
.vista-marca .vm-barra img, .vista-marca .vm-barra .vm-ini { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--dorado); color: var(--negro); display: grid; place-items: center; font-size: 11px; }
.vista-marca .vm-barra .vm-btn { margin-left: auto; background: var(--dorado); color: var(--negro); border-radius: 999px; padding: 5px 10px; font-size: 11px; }
.vista-marca .vm-portada { position: relative; padding: 22px 18px 24px; overflow: hidden; }
.vista-marca .vm-portada::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at calc(100% + 70px) 40px, var(--a0) 0 70px, var(--a1) 0 100px, var(--a2) 0 130px, var(--a3) 0 160px, transparent 0); }
.vista-marca.oscura .vm-portada { background: var(--negro); color: var(--marfil); }
.vista-marca.oscura .vm-portada::before { background: var(--patron-verde); background-size: var(--patron-tam); opacity: .22; }
.vista-marca .vm-portada > * { position: relative; }
.vista-marca .vm-kicker { font: 700 9.5px/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--verdep); }
.vista-marca.oscura .vm-kicker { color: var(--dorado); }
.vista-marca .vm-titulo { font: 600 34px/1 var(--titulos, var(--display)); letter-spacing: -.02em; margin: 8px 0 12px; }
.vista-marca .vm-btn2 { display: inline-flex; background: var(--negro); color: var(--marfil); border-radius: 999px; padding: 8px 14px; font: 700 12px/1 var(--f-texto); }
.vista-marca.oscura .vm-btn2 { background: var(--dorado); color: var(--negro); }
.vista-marca .vm-dias { display: flex; gap: 5px; padding: 0 18px 16px; background: var(--marfil); }
.vista-marca .vm-dias i { flex: 1; height: 26px; border-radius: 7px; background: var(--hay); border: 1.5px solid var(--hay-borde); }
.vista-marca .vm-dias i:nth-child(3) { background: var(--dorado); border-color: var(--dorado); }
.vista-marca .vm-dias i:nth-child(6), .vista-marca .vm-dias i:nth-child(7) { background: transparent; border-color: var(--linea); }
.vista-marca .vm-espacio { height: 14px; background: var(--marfil); }